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

Estoy tratando de encontrar la forma más efectiva de alinear el texto con un div. He intentado 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>

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

Resumen del artículo:

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

Una muestra también está 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 usando #para ocultar estilos de 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>

line-heightDebe agregar el atributo y ese atributo debe coincidir con la altura de 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.

Aquí hay un gran recurso

De http://howtocenterincss.com/ :

Centrarse en CSS es un dolor en el culo. Parece que hay miles de millones de maneras de hacerlo, dependiendo de una variedad de factores. Esto los consolida y le brinda el código que necesita para cada situación.

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 .

Aquí hay algunos recursos excelentes:

• Una guía de Flexbox
• Elementos de centrado con Flexbox
• Sintaxis de Internet Explorer 10 para Flexbox
• Soporte para Flexbox

JSFiddle con prefijos de 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 de navegador cruzado, útil como enlaces en la respuesta marcada, está un poco desactualizado.

Cómo centrar vertical y horizontalmente el texto en una lista desordenada y en un div sin recurrir a las alturas de línea de JavaScript o CSS . No importa cuánto texto tenga, no tendrá que aplicar ninguna clase especial a listas o divs específicos (el código es el mismo para cada uno). Esto funciona en todos los principales navegadores, incluidos Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera y Safari. Hay dos hojas de estilo especiales (una para Internet Explorer 7 y otra para Internet Explorer 6) para ayudarlos debido a sus limitaciones de CSS que los navegadores modernos no tienen.

Andy Howard - Cómo centrar vertical y horizontalmente el texto en una lista desordenada o div

Como no me interesaba 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 hicieron funcionar en Internet Explorer 7 y 6). Puede ser útil para alguien más ...

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>

Es fácil con display: flex. Con el siguiente método, el texto en el divestará centrado 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 anteriores, el código no funciona.

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 mi diven el centro vertical exacto de un exterior de 200 px de alto div. Tenga en cuenta que es posible que necesite 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.

Puede hacer esto configurando la pantalla en 'table-cell' 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 "tabla en línea", "tabla", "título de tabla", "tabla-celda", "tabla-columna", "tabla-columna-grupo", "tabla-fila", "tabla-fila -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 en http://www.w3schools.com/cssref/pr_class_display.asp .

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

Para navegadores 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, fue) 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>

Pruebe esto, agregue el div padre:

display: flex;
align-items: center;

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

También puede funcionar para texto de líneas múltiples 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 .

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

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 .

Comprueba esta solución simple:

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

Hay una manera más simple 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 toda la altura 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%;
}

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: Alinear verticalmente cualquier cosa con solo 3 líneas de CSS

Una solución simple a un elemento de no conocer 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%);
}

Según 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>

usando 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 .

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 cuadrícula lo centra en ambos ejes:

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

Flexbox funcionó perfectamente para mí, centrando múltiples elementos dentro del div padre 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
siguiente código apila todos los elementos dentro de parent-div en una columna, centrando los elementos horizontal y verticalmente. Usé el 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;
}

Utilizar:

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, puede alinear cualquier cosa si no desea que esté en el centro, agregue "left: 0" para alinear a la izquierda.

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;
 }

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>

Esta es otra variación de divun divpatrón usando calc()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 la colocación precisa de divdentro de undiv
• nos sabemos la altura de lo interno div, porque lo ponemos a20px .
• calc(50% - 10px)para 50% - la mitad de la altura para centrar el interiordiv

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 imagen <mat-icon>(que es una fuente).

Hmm, obviamente hay muchas formas de resolver esto.

Pero tengo un <div>posicionamiento absoluto height:100%(en realidad, top:0;bottom:0y ancho fijo) ydisplay:table-cell simplemente no funcionó para centrar el texto verticalmente. Mi solución requería un elemento interno, pero veo que muchas de las otras soluciones también lo hacen, así que también podría agregarlo:

Mi contenedor es a .labely quiero el número centrado verticalmente en él. Lo hice posicionándome absolutamente 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/

Puedes usar 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>

Usar CSS grid 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>

Intenta incrustar un elemento de tabla.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

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

Centrado absoluto horizontal y vertical 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 usted cuál prefiere.

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

Algunos buenos trucos son los siguientes:

Truco 1 - Al usar 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 - Al usar 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 Explorer 9+ */
}

Truco 3 - Al usar 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>

CSS:

.vertical {
   display: table-caption;
}

Agregue esta clase al elemento que contiene las cosas que desea alinear verticalmente

Si necesita usar con la min-heightpropiedad, debe agregar este CSS en:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}