html imagen ¿Cómo centro verticalmente el texto con CSS?




centrar texto verticalmente html (24)

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

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?


Para una sola línea de texto (o un solo carácter) puede utilizar esta técnica:

Se puede usar cuando #box tiene una altura relativa no fija en% .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Vea la demostración en vivo en JsBin (más fácil de editar CSS) o JsFiddle (más fácil de cambiar la altura del marco de resultados).

Si desea colocar texto interno en HTML, no en CSS, entonces necesita ajustar el contenido del texto en un elemento en línea adicional y editar #box::after para que coincida. (Y, por supuesto, content: propiedad debe ser eliminada.)
Por ejemplo,
<div id="box"><span>TextContent</span></div>
En este caso, #box::after debe reemplazarse por #box span .

Para el soporte de IE8 debes reemplazar :: con :


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

Solo agrega el siguiente código al elemento contenedor :

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 contenedor , 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).

Así que para centrar el elemento de flexión tanto horizontal como verticalmente, configúrelo con margin:auto

Flexbox Demo 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>

NB: todo lo anterior se aplica al centrado de elementos mientras se colocan en filas horizontales . Este también es el comportamiento predeterminado, porque, de forma predeterminada, el valor de flex-direction es row . Si, sin embargo, los elementos flexibles deben distribuirse en columnas verticales , entonces flex-direction: column debe establecerse en el contenedor para establecer el eje principal como columna y, además, las propiedades de justify-content y elementos de align-items ahora funcionan correctamente. con justify-content: center centrado justify-content: center vertical y elementos de align-items: center centrado align-items: center horizontalmente)

flex-direction: column demostració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 características y obtener la sintaxis para una máxima compatibilidad con el navegador es flexyboxes

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

Para la compatibilidad entre navegadores para la display: flex y de align-items , puede 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;

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


Enfoque 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>


El siguiente código colocará el div en el centro de la pantalla, independientemente del tamaño de la pantalla o del tamaño de div :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Ver más detalles sobre flex here .


Flexboxes que fueron introducidos en CSS3 son la solución:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Nota : Reemplace la línea que está marcada como importante por una de estas líneas, si desea centrar el texto:

1) Sólo verticalmente:

margin: auto 0;

2) Solo horizontalmente:

margin: 0 auto;

ACTUALIZACIÓN : Como noté, este truco también funciona con cuadrículas (pantalla: cuadrícula).


La forma simple y versátil es (como el enfoque de mesa de michielvoo):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

El uso de este atributo (o una clase equivalente) en una etiqueta principal funciona incluso para que muchos niños se alineen:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Una solución muy simple y poderosa para alinear verticalmente el centro:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


Incluso mejor idea para esto. Tú también puedes hacer esto.

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>


Ajústelo dentro del button lugar de div si no le importa su pequeño efecto 3D visual.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


También puede utilizar las siguientes propiedades.

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

Para 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 una mezcla 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 alinee 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 en 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.

Será la forma en que los sitios web están hechos de aquí en adelante.

¡Aprenderlo!


Posicionamiento absoluto y estiramiento

Al igual que con el método anterior, éste comienza estableciendo la posición en los elementos padre e hijo como relativo y absoluto, respectivamente. A partir de ahí las cosas difieren.

En el código a continuación, una vez más he usado este método para centrar al niño tanto horizontal como verticalmente, aunque solo se puede usar el método para centrar verticalmente.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

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

La idea con este método es intentar que el elemento secundario se extienda a los 4 bordes estableciendo los valores superior, inferior, derecho e izquierdo a 0. Debido a que nuestro elemento secundario es más pequeño que nuestros elementos principales, no puede alcanzar todos 4 aristas.

Al establecer auto como el margen en los 4 lados, sin embargo, los márgenes opuestos son iguales y muestra nuestro div hijo en el centro del div padre.

Desafortunadamente, lo anterior no funcionará en IE7 y más adelante, y al igual que en el método anterior, el contenido dentro del div niño puede crecer demasiado y hacer que se oculte.


Necesitaba una fila de elefantes en los que se podía hacer clic, centrados verticalmente, pero sin usar una tabla para sortear algunas rarezas de Internet Explorer 9.

Finalmente encontré el mejor CSS (para mis necesidades) y es genial con Firefox, Chrome e Internet Explorer 11. Lamentablemente, Internet Explorer 9 todavía se está riendo de mí ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Obviamente, no necesitas los bordes, pero pueden ayudarte a ver cómo funciona.


Pruebe la propiedad de transformación:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


La solución aceptada como la respuesta es perfecta para usar line-height igual a la altura de div, pero esta solución no funciona perfectamente cuando el texto está ajustado 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:


Prueba el siguiente código:

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

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>


No estoy seguro de que alguien haya optado por el writing-mode , pero creo que resuelve el problema de manera limpia y tiene un amplio soporte :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Esto, por supuesto, funcionará con cualquier dimensión que necesite (además del 100% de la matriz). Si elimina el comentario de las líneas de borde, será útil familiarizarse.

Demostración de JSFiddle para que juegues .

Soporte de Caniuse : 85.22% + 6.26% = 91.48% (¡incluso IE está en!)


Puede utilizar el siguiente fragmento de código como referencia. Está funcionando como un encanto para mí:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

La salida del fragmento de código anterior es la siguiente:

Crédito del código fuente: codepuran.com/web-designing/… codepuran.com/web-designing/…


Donde quiera que desee verticalmente, el estilo central significa que puede probar display:table-cell y vertical-align:middle .

Ejemplo:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


Para todas sus necesidades de alineación vertical!

Declara este Mixin:

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

Entonces inclúyelo en tu elemento:

.element{
    @include vertical-align();
}

Vi las respuestas anteriores, y funcionarán solo para ese ancho de pantalla (no responde). Para el responsive tienes que usar flex.

Ejemplo:

div{ display:flex; align-item:center;}

Todo el crédito es para el propietario de este enlace @Sebastian Ekström Link ; por favor, pasa por esto codepen en acción codepen . Al leer el artículo anterior también creé un violín de demostración .

Con solo tres líneas de CSS (excluyendo los prefijos de los proveedores) podemos hacerlo con la ayuda de una transformación: la traducción se centra verticalmente en lo que queramos, incluso si no sabemos su altura.

La transformación de la propiedad CSS se usa generalmente para rotar y escalar elementos, pero con su función de traslación, ahora podemos alinear elementos verticalmente. Por lo general, esto se debe hacer con posicionamiento absoluto o ajuste de alturas de línea, pero esto requiere que usted conozca la altura del elemento o que solo trabaje 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 posición-propiedad en el padre. ¡Funciona directamente, incluso en Internet Explorer 9 !

Para hacerlo aún más simple, podemos escribirlo como una mezcla con los prefijos de sus proveedores.


Solo me gustaría extender la respuesta de @michielvoo para liberar la necesidad de la altura de la línea y la respiración de la altura div. Básicamente es una versión simplificada como esta:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTA: se necesita una parte comentada de css para fixed-height de la envolvente div .





vertical-alignment