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

Estoy intentando encontrar la forma más eficaz 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>

Expandir fragmento

May 31 '10 02:05 shinjuo

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

Consulte esta respuesta para obtener más detalles.

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

Expandir fragmento

Es posible combinar trucos para navegadores antiguos (Internet Explorer 6/7) en estilos usando #para 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>

Expandir fragmento

May 30 '2010 19:05 Robert Harvey

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

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Expandir fragmento

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

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

Feb 06 '2011 19:02 David

Aquí hay un gran recurso.

De http://howtocenterincss.com/ :

Centrarse en CSS es un dolor de cabeza. Parece haber millones de maneras de hacerlo, dependiendo de una variedad de factores. Esto los consolida y te brinda el código que necesitas 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 para Flexbox
Centrado de elementos 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>

Expandir fragmento

Otra solución

Esto es de cerosixtres y te 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>

Expandir fragmento

Respuesta anterior

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

Cómo centrar texto vertical y horizontalmente tanto en una lista desordenada como en un div sin recurrir a alturas de línea de JavaScript o CSS . No importa cuánto texto tengas, no tendrás 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 navegadores principales, 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 texto vertical y horizontalmente en una lista o div desordenado

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). Quizás a alguien más le sirva...

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>

Expandir fragmento

Nov 22 '2012 15:11 Adam Tomat

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

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Expandir fragmento

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>

Expandir fragmento

Debes ver la versión del navegador que necesitas; en versiones antiguas el código no funciona.

Dec 12 '2015 20:12 Raul Fernandez Marques