3

Me gustaría saber que maneras existen para alinear un div verticalmente, o cualquier atributo como por ejemplo section o article. Ya sé que la pregunta es muy general pero es que acabo de empezar hace poco con CSS. Gracias.

6
  • No veo porque esta pregunta es un duplicado... quizás sea demasiada amplia pero duplicado...hm... Commented el 8 ene. 2017 a las 2:17
  • 1
    @aldanux: El hecho que diga que fue cerrada por Comunidad significa que OP mismo aceptó el duplicado.
    – sstan
    Commented el 8 ene. 2017 a las 3:59
  • @aldanux El ejemplo (6) Centrar div verticalmente y horizontalmente dentro de otro div creo que responde a la pregunta. A menos que haya algo que no estoy viendo, entiendo que es un duplicado.
    – Mariano
    Commented el 8 ene. 2017 a las 8:10
  • 1
    @aldanux Cuando un usuario busque, puede encontrar esta misma pregunta, que lo redireccionará a la que se marcó como duplicado. Que esté cerrada como duplicado no significa que se elimina, todo lo contrario, se mantiene apuntando a la pregunta con respuestas de mayor calidad... Personalmente creo que hay muchas preguntas a las que deberíamos buscarle duplicados, pero eso ya es otro tema.
    – Mariano
    Commented el 8 ene. 2017 a las 11:02
  • 1
    Es cierto que hay casos en los que podemos ser más laxos, pero, desde mi opinión, la respuesta con la que se marcó como duplicado es una excelente publicación, ya que no apunta a mostrar el código de cómo sería para centrar (como suele ocurrir en estos casos), sino que tiene como objetivo explicar el porqué del método y qué significa cada propiedad involucrada. Quizás me equivoque, pero es lo que creo.
    – Mariano
    Commented el 8 ene. 2017 a las 11:15

4 respuestas 4

4

Existen miles de formas:

Método del alto de linea (Line-height method)

Ejemplo: Texto alineado verticalmente.

Resultado:

#hijo {
    line-height: 200px; //Damos 200px de alto para notar el efecto
}

El método de la tabla CSS (CSS Table method)

Ejemplo:

<div id="padre">
    <div id="hijo">Contenido a centrar aquí.</div>
</div>

Resultado:

#padre {
    display: table;
    height:200px;
}
#hijo {
    display: table-cell;
    vertical-align: middle;
}

Posición absoluta y extensión (Absolute Positioning and Stretching)

Ejemplo:

<div id="padre">
    <div id="hijo">Contenido aquí.</div>
</div>

Resultado:

#padre {
    position: relative;
}
#hijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Div flotante (Floater Div)

Ejemplo:

<div id="padre">
    <div id="flotante"></div>
    <div id="hijo">Contenido aquí.</div>
</div>

Resultado:

#padre {height: 250px;}

#flotante {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#hijo {
    clear: both;
    height: 100px;
}

De este link saque los ejemplo. Existen varios mas.

1

Puedes utilizar los pseudoelementos :before + vertical-align:middle

html,
body {
  margin: 0;
}

.container {
  margin: 5px;
  background: #ccc;
  width: calc(100% - 10px);
  height: calc(100vh - 10px);
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
}

.container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.element {
  display: inline-block;
  max-width: 300px;
  vertical-align: middle;
  white-space: normal;
}

p {
  margin: 0 0 0.5rem;
  text-align: center;
}
<div class="container">
  <div class="element">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in lectus quam.</p>
    <p>Praesent eget erat ut risus sodales ornare. Quisque quis pretium metus.</p>
  </div>
</div>

3
  • Responder con solo enlaces se considera de baja calidad
    – user75901
    Commented el 18 ene. 2019 a las 14:26
  • Edita esto por favor y añade todo lo relevante aquí
    – user75901
    Commented el 18 ene. 2019 a las 14:26
  • Hola @Shaz, añadí el enlace a elcssar porque en él publico 6 técnicas diferentes mucho más sencillas que la mayoría que dan vueltas por los foros, pero además ejemplos y demostraciones comparativas entre la que he compartido aquí, que es mía, y las técnicas con flexbox y explico en qué casos son más útiles unas y otras. Es un contenido demasiado extenso para transcribirlo todo una respuesta de StackOverflow y creo que puede serle muy útil a la comunidad. En la respuesta anterior hay incluido un enlace a la fuente y pensé que no habría problema en incluir yo uno. Commented el 26 ene. 2019 a las 20:02
1

hay dos metodos muy faciles

        * {
            /* establece que el tamaño de
             la caja sera desde los bordes*/
            box-sizing: border-box;
        }

        body {
            /* quita los margenes del body */
            margin: 0;
            background-color: aqua;
        }

        .container {
            position: relative;
            /* calcula el ancho del vh - el tamaño de la caja */
            /* se puede usar /2 para que no crezca el vh */
            margin: calc((100vh - 450px) /2) auto;
            width: 450px;
            height: 450px;
            background-color: rgba(245, 245, 245, 0.5);
        }
        
        .box {
            width: 150px;
            height: 150px;
            background-color: rgba(25, 25, 25, 0.5);
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
        }
    <div class="container">
        <div class="box">hola</div>
    </div>

puedes usar flex

        * {
            /* establece que el tamaño de
             la caja sera desde los bordes*/
            box-sizing: border-box;
        }

        body {
            /* quita los magenes de las cajas*/
            margin: 0;
            background-color: aqua;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container{
            display: flex;
            width: 450px;
            height: 450px;
            align-items: center;
            justify-content: center;
            background-color: rgba(245, 245, 245, 0.5);
        }
        .box{
            /* el hijo es bueno y obedece al padre :)*/
            width: 150px;
            height: 150px;
            background-color: rgba(25, 25, 25, 0.5);
        }
    <div class="container">
        <div class="box">hola</div>
    </div>

0
0

aca te dejo 2 opciones, que son las que uso yo:

.centrarVerticalmente{

  position: absolute;
  height: 100px;
  background: red;
  top: 50%; 
  margin-top: -50px; /*mitad de la altura del div*/
  
}

.centrarVerticalmente2{

    height: 50px;
    background: yellow;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);

}
<!-- en caso que ya tengas un transform sobre el eje x -->
<div class="centrarVerticalmente">
     Div centrado verticalmente
</div>
<!-- en caso que no tengas un transform en el eje x -->
<div class="centrarVerticalmente2">
     Div centrado verticalmente
</div>

La segunda opcion es la mejor en mi punto de vista, aunque ya halla una respuesta puede serte util.

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.