¿Cómo alineo verticalmente el texto en un div?

1374

Estoy tratando de encontrar la forma más efectiva de alinear el texto con un div. He probado algunas cosas y ninguna parece funcionar.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
4
859

La forma correcta de hacer esto en los navegadores modernos es usar Flexbox.

Consulte esta respuesta para obtener más detalles.

Vea a continuación algunas formas más antiguas que funcionan en navegadores más antiguos.


Centrado vertical en CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Resumen del artículo:

Para un navegador CSS 2, se puede usar display:table/ display:table-cellpara centrar el contenido.

También hay una muestra disponible en JSFiddle :

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Es posible combinar hacks para navegadores antiguos (Internet Explorer 6/7) en estilos con el uso #de ocultar estilos de los navegadores más nuevos:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>
1
  • 73
    Es bastante ridículo que las tablas estén mal vistas como una especie de truco anticuado que solo un novato usaría, y aquí estamos usando "display: table-cell" en un DIV como una solución mucho más pirateada. Desty 6 de febrero de 2015 a las 12:28
834

line-heightDebe agregar el atributo y ese atributo debe coincidir con la altura del div. En tu caso:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

De hecho, probablemente podría eliminar el heightatributo por completo.

Sin embargo, esto solo funciona para una línea de texto , así que tenga cuidado.

2
  • 396
    Creo que eso solo es válido si tiene una sola línea de texto en el div. WEFX 1/11/11 a las 18:51
  • 49
    Absolutamente, tendrías un espaciado de línea loco en tu texto si se ejecutara en más de una línea. David 5 feb 12 a las 20:15
572

Aquí hay un gran recurso

De http://howtocenterincss.com/ :

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Usando Flexbox

En línea con mantener esta publicación actualizada con la última tecnología, aquí hay una manera mucho más fácil de centrar algo usando Flexbox. Flexbox no es compatible con Internet Explorer 9 y versiones anteriores .

A continuación, presentamos algunos recursos excelentes:

JSFiddle con prefijos del navegador

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Otra solución

Esto es de zerosixthree y le permite centrar cualquier cosa con seis líneas de CSS

Este método no es compatible con Internet Explorer 8 y versiones anteriores .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Respuesta anterior

Un enfoque simple y en varios navegadores, útil ya que los enlaces en la respuesta marcada están un poco desactualizados.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or CSS line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera and Safari. There are two special stylesheets (one for Internet Explorer 7 and another for Internet Explorer 6) to help them along due to their CSS limitations which modern browsers don't have.

Andy Howard: cómo centrar texto vertical y horizontalmente en una lista desordenada o div

Como no me importaba mucho Internet Explorer 7/6 para el último proyecto en el que trabajé, utilicé una versión ligeramente simplificada (es decir, eliminé las cosas que lo hacían funcionar en Internet Explorer 7 y 6). Podría ser útil para otra persona ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}
<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>
1
  • La primera solución no funcionó para mí ... ¡Sin embargo, la segunda solución sí lo hizo! :)Abhirajshri Winsome 11 de agosto a las 15:13
203

Es fácil con display: flex. Con el siguiente método, el texto en el divse centrará verticalmente:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Y si quieres, horizontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Debe ver la versión del navegador que necesita; en versiones antiguas, el código no funciona.

0
113

Utilizo lo siguiente para centrar verticalmente elementos aleatorios fácilmente:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Esto centra el texto en my diven el centro vertical exacto de un exterior de 200px de alto div. Tenga en cuenta que es posible que deba usar un prefijo de navegador (como -webkit-en mi caso) para que esto funcione para su navegador.

Esto funciona no solo para el texto, sino también para otros elementos.

0
56

Pruebe esto, agregue el div principal:

display: flex;
align-items: center;
0
42

Puede hacer esto configurando la pantalla en 'celda de tabla' y aplicando un vertical-align: middle;:

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

Sin embargo, esto no es compatible con todas las versiones de Internet Explorer de acuerdo con este extracto que copié de http://www.w3schools.com/cssref/pr_class_display.asp sin permiso.

Nota: Los valores "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row" -group "y" heredar "no son compatibles con Internet Explorer 7 y versiones anteriores. Internet Explorer 8 requiere un! DOCTYPE. Internet Explorer 9 admite los valores.

La siguiente tabla muestra los valores de visualización permitidos también de http://www.w3schools.com/cssref/pr_class_display.asp .

Ingrese la descripción de la imagen aquí

0
32

En estos días (ya no necesitamos Internet Explorer 6-7-8), solo usaría CSS display: tablepara este problema (o display: flex).


Para navegadores más antiguos:

Mesa:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>

Flexionar:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}
<div class="vcenter">
  <p>This is my text</p>
</div>

Esta es (en realidad, era) mi solución favorita para este problema (simple y muy bien compatible con el navegador):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>
0
20

Flexbox funcionó perfectamente para mí, centrando múltiples elementos dentro de la div principal horizontal y verticalmente.

Código HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

Código CSS: el
código siguiente apila todos los elementos dentro de parent-div en una columna, centrando los elementos horizontal y verticalmente. Usé child-div para mantener los dos elementos Anchor en la misma línea (fila). Sin child-div, los tres elementos (Anchor, Anchor & Paragraph) se apilan dentro de la columna parent-div uno encima del otro. Aquí solo child-div se apila dentro de la columna parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
8

Aquí hay una solución que funciona mejor para una sola línea de texto.

También puede funcionar para texto de varias líneas con algunos ajustes si se conoce el número de líneas.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Aquí hay un JSFiddle .

8
<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>
0
7

Puede alinear el texto central verticalmente dentro de un div usando Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

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

Puede obtener más información al respecto en Una guía completa de Flexbox .

6

Compruebe esta sencilla solución:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

5

Hay una forma más sencilla de alinear verticalmente el contenido sin recurrir a table / table-cell:

http://jsfiddle.net/bBW5w/1/

En él he agregado un div invisible (ancho = 0) que asume la altura completa del contenedor.

Parece funcionar en Internet Explorer y Firefox (últimas versiones). No verifiqué con otros navegadores

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Y por supuesto el CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}
0
5

Esta es la solución más limpia que he encontrado (Internet Explorer 9+) y agrega una solución para el problema de "apagado por .5 píxeles" al usar transform-styleque otras respuestas habían omitido.

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

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

Fuente: alinee verticalmente cualquier cosa con solo 3 líneas de CSS

5

HTML:

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS:

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}
5

Puede utilizar la cuadrícula de visualización y el centro de elementos de lugar:

.container {
  width: 200px;
  height: 200px;
  border: solid red;
  display: grid;
  place-items: center;
}
<div class="container">
  Lorem, ipsum dolor.
</div>
4

Una solución simple para un elemento de desconocimiento de valores:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
4

De acuerdo con la respuesta de Adam Tomat, se preparó un ejemplo de JSFiddle para alinear el texto en div :

<div class="cells-block">    
    text<br/>in the block   
</div>

mediante el uso de display: flex en CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

con otro ejemplo y algunas explicaciones en una publicación de blog .

4

Margen automático en un elemento de cuadrícula.

De manera similar a Flexbox, la aplicación de margen automático en un elemento de la cuadrícula lo centra en ambos ejes:

.container {
  display: grid;
}
.element {
  margin: auto;
}
3

Usar:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}
<div class="container">
    <h1>Vertical align text</h1>
</div>

Con este truco, puedes alinear cualquier cosa si no quieres que quede en el centro, agrega "left: 0" para alinear a la izquierda.

2

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }
2

Usando flex, tenga cuidado con las diferencias en la representación de los navegadores.

Esto funciona bien tanto para Chrome como para Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}
<div class="outer"><div class="inner">Active Tasks</div></div>

Compare con este que solo funciona con Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}
<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>
1

Esta es otra variación del patrón diven un divque se usa calc()en CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Esto funciona porque:

  • position:absolutepara una colocación precisa del divinterior de undiv
  • nos sabemos la altura de lo interno div, porque lo ponemos a 20px.
  • calc(50% - 10px)al 50% - la mitad de la altura para centrar el interiordiv
1
  • 1
    El div padre necesitaría la posición: relativaToni Michel Caubet 20 de junio de 2016 a las 7:40
1

Esto funciona bien:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Hablar con descaro a

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Sin y con la etiqueta de la imagen <mat-icon>(que es una fuente).

1

Puede utilizar css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
1
  • 1
    Por favor, mencione que debe especificar height; de lo contrario no funcionará. avalanche1 2 de marzo a las 15:40
0

Hmm, obviamente hay muchas formas de resolver esto.

Pero tengo un <div>que está posicionado absolutamente height:100%(en realidad, top:0;bottom:0y un ancho fijo) y display:table-cellsimplemente no funcionó para centrar el texto verticalmente. Mi solución requería un elemento de tramo interno, pero veo que muchas de las otras soluciones también lo hacen, por lo que también podría agregarlo:

Mi contenedor es un .labely quiero el número centrado verticalmente en él. Lo hice colocándome absolutamente en top:50%y estableciendoline-height:0

<div class="label"><span>1.</span></div>

Y el CSS es el siguiente:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Véalo en acción: http://jsfiddle.net/jcward/7gMLx/

1
  • 1
    Agradable porque es la solución más simple. El inconveniente es que funciona solo para texto de una sola línea, consulte la bifurcación del ejemplo con texto más largo. jsfiddle.net/6sWfwTomas Tintera 8/04/2014 a las 7:29
0

Usar la cuadrícula CSS lo hizo por mí:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}
<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>
-1

Existen varios trucos para mostrar contenido o una imagen en el centro de un div. Algunas de las respuestas son realmente agradables y también estoy totalmente de acuerdo con ellas.

Centrado horizontal y vertical absoluto en CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Hay más de 10 técnicas con ejemplos . Ahora depende de ti cuál prefieres.

Sin duda, display:table; display:table-Celles un truco mejor.

Algunos buenos trucos son los siguientes:

Truco 1 - Usando display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Código CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Truco 2 - Usando display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Código CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet&nbsp;Explorer 9+ */
}

Truco 3 - Usando position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>
-1

Intente incrustar un elemento de tabla.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>
3
  • 7
    Las tablas son solo para tratar con datos tabulares. Nunca deben usarse para solucionar problemas de diseño. Micros 4 de febrero de 2014 a las 10:44
  • 3
    Sin embargo, lo bueno de las tablas es que siempre son consistentes: CSS se interpreta de muchas maneras diferentes y colocar DIV anidados solo para hacer algo simple agrega HTML adicional (y confusión). CSS todavía tiene fallas gravesMC9000 13/06/2014 a las 22:20
  • 4
    Sí, desafortunadamente, esta SIGUE SIENDO la única forma confiable de alinear verticalmente texto (desconocido) en un bloque. ¿Por qué los dioses CSS odian tanto a Valign? (TODO el navegador PUEDE hacerlo de manera consistente, pero solo en las celdas de la tabla)T4NK3R 27 de julio de 2014 a las 17:07