Pregunta ¿Cómo centro verticalmente el texto con CSS?


Tengo un elemento div que contiene texto, y quiero alinear el contenido de este centro verticalmente.

Aquí está mi estilo div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

¿Cuál es la mejor manera de hacer esto?


1804
2018-01-14 21:25


origen


Respuestas:


Puedes probar este enfoque básico:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Sin embargo, solo funciona para una sola línea de texto, porque establecemos la altura de la línea a la misma altura que el elemento del cuadro contenedor.


Un enfoque más versátil

Esta es otra forma de alinear el texto verticalmente. Esta solución funcionará para una sola línea y múltiples líneas de texto, pero aún requiere un contenedor de altura fija:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

El CSS simplemente ajusta el tamaño <div>, el centro verticalmente alinea el <span> estableciendo el <div>línea de altura igual a su altura, y hace que el <span> un bloque en línea con vertical-align: middle. Luego, establece la altura de la línea en normal para el <span>, por lo que su contenido fluirá naturalmente dentro del bloque.


Simulación de la visualización de la tabla

Y aquí hay otra opción, que puede no funcionar en versiones anteriores navegadores que no son compatibles display: table y display: table-cell (básicamente solo Internet Explorer 7). Usando CSS, simulamos el comportamiento de la tabla (ya que las tablas admiten la alineación vertical), y el HTML es el mismo que el segundo ejemplo:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Usando posicionamiento absoluto

Esta técnica usa una configuración de elemento completamente posicionado superior, inferior, izquierda y derecha a 0. Se describe con más detalle en un artículo de Smashing Magazine, Centrado horizontal y vertical absoluto en CSS.


2447
2018-03-06 08:15



Otra forma (no se menciona aquí todavía) es con Flexbox.

Simplemente agregue el siguiente código a la envase elemento:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Demostración de Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternativamente, en lugar de alinear el contenido a través del envase, flexbox también puede centrar el elemento flexible con un margen automático  cuando solo hay un elemento flexible en el contenedor flexible (como el ejemplo dado en la pregunta anterior).

Entonces, para centrar el elemento flexible tanto horizontal como verticalmente, simplemente ajústelo con margin:auto

Demostración de Flexbox 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NÓTESE BIEN: Todo lo anterior se aplica a los artículos de centrado mientras los coloca en filas horizontales. Este es también el comportamiento predeterminado, porque por defecto el valor de flex-direction es row. Si, sin embargo, los elementos flexibles deben ser distribuidos en columnas verticales, entonces flex-direction: column se debe configurar en el contenedor para establecer el eje principal como columna y, además, la justify-content y align-items propiedades ahora funcionan al revés con justify-content: center centrando verticalmente y align-items: center centrando horizontalmente)

flex-direction: column manifestación

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Un buen lugar para comenzar con Flexbox para ver algunas de sus funciones y obtener la sintaxis para un máximo soporte del navegador es Flexyboxes 

Además, el soporte del navegador hoy en día es muy bueno: Puedo usar

Para la compatibilidad entre navegadores para display: flex y align-items, puedes usar lo siguiente:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

956
2018-01-14 21:29



Puede hacer esto fácilmente agregando el siguiente fragmento de código CSS:

display: table-cell;
vertical-align: middle;

Eso significa que su CSS finalmente se ve así:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


109
2017-10-25 18:12



Como referencia y para agregar una respuesta más simple:

CSS puro:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

O como un Mixin SASS / SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Usar por:

.class-to-center {
    @include vertical-align;
}

Por la publicación del blog de Sebastian Ekström Vertical alinea cualquier cosa con solo 3 líneas de CSS:

Este método puede hacer que los elementos estén borrosos debido a que el elemento se coloca en un "medio píxel". Una solución para esto es establecer su elemento padre para preserve-3d. Como siguiendo:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Vivimos en 2015+ y Flex Box es compatible con todos los principales navegadores modernos.

Esta será la forma en que los sitios web se crean a partir de ahora.

¡Aprenderlo!


97
2017-08-11 11:59



Todo el crédito es para este propietario del enlace @Sebastian Ekström Enlazar; Por favor revisa esto. Véalo en acción codepen. Al leer el artículo anterior, también creé un violín demo.

Con solo tres líneas de CSS (excluyendo prefijos de proveedor) podemos hacerlo con la ayuda de una transformación: translateY centra verticalmente lo que queramos, incluso si no conocemos su altura.

La transformación de propiedad CSS se usa generalmente para elementos rotativos y de escala, pero con su función translateY ahora podemos alinear elementos verticalmente. Por lo general, esto debe hacerse con un posicionamiento absoluto o ajuste de alturas de línea, pero estos requieren que conozca la altura del elemento o que solo funcione en texto de una sola línea, etc.

Entonces, para hacer esto, escribimos:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Eso es todo lo que necesitas. Es una técnica similar al método de posición absoluta, pero con la ventaja de que no tenemos que establecer ninguna altura en el elemento o propiedad de posición en el elemento primario. Funciona directamente fuera de la caja, incluso en Internet Explorer 9!

Para hacerlo aún más simple, podemos escribirlo como un mixin con sus prefijos de proveedor.


49
2017-12-13 20:09



Las Flexboxes que se introdujeron en CSS3 son la solución:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Nota: Reemplace la línea arriba marcada como importante con una de estas líneas, si desea centrar el texto:

1) Solo verticalmente:

margin: auto 0;

2) Solo horizontalmente:

margin: 0 auto;

ACTUALIZAR: Como noté, este truco funciona con grillas (pantalla: cuadrícula), también.


22
2017-08-28 10:11



Acercamiento flexible

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26



La solución aceptada como la respuesta es perfecta para usar line-height lo mismo que el alto de div, pero esta solución no funciona perfectamente cuando el texto está envuelto O está en dos líneas.

Pruebe este si el texto está envuelto o está en varias líneas dentro de un div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Para más referencia, ver:


13
2018-04-15 08:28



También puedes usar las siguientes propiedades.

display: flex; 
align-content: center; 
justify-content : center;

9
2017-12-01 18:06