0

Estoy teniendo problemas para ubicar un texto entre el tag h1 en el centro de la pantalla. Probé de un monton de maneras y, o me queda arriba de todo o no aparece y se visualiza sólo cuando abro la consola del navegador (???).

Este es el HTML y CSS que he logrado hasta ahora:

body {
  background: rgb(0, 0, 0);
  text-align: center;
}

h1 {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  color: rgb(00, 00, 00);
  font-family: cursive;
  text-shadow: 0px 370px 1.5px rgb(0, 0, 0);
  text-align: center;
}

.container {
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  justify-content: center;
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50% !important;
  margin-bottom: 50% !important;
  margin-left: 50% !important;
  margin-right: 50% !important;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aventura</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="./Introduction/style.css" />
    </head>
    <div id="modal" class="modal"> 
      <div class="modal-dialog modal-dialog modal-dialog-centered">  
        <div class="modal-content">    
          <span id="presentación">(Esto que comienza entre paréntesis<br>descansará en el silencio<br>de los puntos suspensivos)</span>   
          <button onclick= "world()">Iniciar</button>   
        </div>
      </div> 
    </div>
    <body>
        <header>
          <audio src="./Introduction/mp3/Orbit.mp3" type="audio/mp3" id="audio">
        </header>
        <div class="container">
          <h1 id="texto">
            El <span id="text">fuego</span> fue descubierto el año mismo en que a la
            tierra le fue precisa la ceniza
          </h1>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="./Introduction/behavior.js"></script>
    </body>
</html>

Muy agradecido si me pueden dar una mano. Y me gustaría saber qué pasa cuando se abre la consola del navegador. Ya me pasó en otras ocasiones que el comportamiento de la página se modifica cuando abro la consola para hacer pruebas... ¡Gracias!

1
  • 1
    Estás aplicando las mismas propiedades de margin con distintos valores a la clase .container; removiendo todos esos valores de margin y cambiando la clase .container por .container-fluid queda centrado.
    – Erica T.
    el 10 ago. 2020 a las 23:55

1 respuesta 1

0

Creo que hay muchas reglas css que no vienen al caso, he dejado solo lo indispensable y lo he actualizado usando css3.

Como puedes ver he usado flexbox y dos propiedades align-items y justify-content para colocarlos justo en el centro.

html, body {
height: 100%;
margin: 0;
}

body {
  background: rgb(0, 0, 0);
  text-align: center;
}

h1 {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  color: rgb(00, 00, 00);
  font-family: cursive;
  text-align: center;
}

.container {
  width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aventura</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="./Introduction/style.css" />
    </head>
    <div id="modal" class="modal"> 
      <div class="modal-dialog modal-dialog modal-dialog-centered">  
        <div class="modal-content">    
          <span id="presentación">(Esto que comienza entre paréntesis<br>descansará en el silencio<br>de los puntos suspensivos)</span>   
          <button onclick= "world()">Iniciar</button>   
        </div>
      </div> 
    </div>
    <body>
        <header>
          <audio src="./Introduction/mp3/Orbit.mp3" type="audio/mp3" id="audio">
        </header>
        <div class="container">
          <h1 id="texto">
            El <span id="text">fuego</span> fue descubierto el año mismo en que a la
            tierra le fue precisa la ceniza
          </h1>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="./Introduction/behavior.js"></script>
    </body>
</html>

2
  • Muchas gracias, funciona perfecto. Una pregunta, por qué min-height: 90%;? me fijé y no estaba del todo centrado en la pantalla porque el div no ocupaba todo el body, poniendo el min-height en 100% si queda perfecto
    – Sancaf
    el 11 ago. 2020 a las 0:18
  • ups, tienes toda la razón, lo cambio. el 11 ago. 2020 a las 0:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.