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


1186

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>





Respuestas:


782

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>


3
Creo que el primer enlace es mejor aunque parezca complicado porque el segundo enlace usa solo una fila de texto o una imagen de la que conoces la altura. ¿Qué sucede si tiene 2 o 3 filas de texto o si no conoce la altura de su texto, porque varía? ¿Cómo funcionaría eso con altura de línea? Así que para resumir. Probé la primera versión y funciona en IE, Firefox Y CHROME.
Raul

954
No entiendo, ¿por qué deberíamos subvertir con estas cosas? ¡Es el siglo XXI! por qué simplemente no incluyen una maldita opción para alinear el maldito texto verticalmente en CSS ... así: centrado en el contenido: ambos, vertical u horizontalmente. Es increíble que la tecnología utilizada durante años sea tan tonta.
Alexander.Iljushkin

34
@Flextra: esta es la razón por la cual la gente todavía usa tablas para el diseño de la cuadrícula. La alineación vertical (o cualquier cosa con datos de altura y dinámica) puede ser un desafío con CSS puro. Tienes que estar dispuesto a hacer hacks raros como este (de alguna manera derrota la idea de "separar el contenido del diseño"), o tomar el éxito de renderizado de múltiples pasadas y usar tablas no estáticas. Nunca he tenido quejas de los usuarios finales a tablepesar de que rutinariamente rompo los corazones de los fanáticos de CSS. La mayoría de ellos solo diseñan blogs simples y sitios estáticos. Algunos de nosotros construimos software empresarial y necesitamos una visualización de datos densa, y nuestros usuarios se preocupan más por la funcionalidad.
nada es necesario

66
Sí. No me malinterpreten, si construyo un "sitio" voy con lean html y prefiero CSS puro, pero no sé cuántas veces luché con cosas de alineación durante horas, cuando solo dije 'F it' y usé un table. Las cosas están mejor ahora, pero algunos de nosotros que hacemos aplicaciones web de negocios tenemos que admitir navegadores más antiguos (¡IE6 todavía está en uso en algunos clientes!), Mientras que las personas que hacen blogs pueden vivir en las nubes y pretender que todos en el mundo tienen conexión rápida, computadora nueva y la última versión del navegador X con CSS 3, etc. Caso en cuestión: algunos complementos de Jira usan tablas de una sola fila para el diseño (o lo hicieron de todos modos)
nada es necesario el

61
Es bastante ridículo que las mesas sean mal vistas como una especie de hack anticuado que solo un novato usaría, y aquí estamos usando "display: table-cell" en un DIV como una solución mucho más hack.
Desty

744

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.


368
Creo que eso solo es válido si tiene una sola línea de texto en el div.
WEFX

49
Absolutamente, tendría un espaciado de línea loco en su texto si se ejecutara en más de 1 línea.
David

1
@BobChatting, sí. Vea mi respuesta para una solución que permite múltiples líneas de texto.
Adam Tomat

2
la altura de línea se propaga a todos los niños
KVM

44
no funciona con porcentaje: altura: 100%; altura de línea: 100%
albanx

477

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:

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>


2
No hay problema. Todavía prefiero usar, height: x; line-height: x;pero con mayor frecuencia no necesito varias líneas de texto. Por eso me encanta esta solución. Simple, reutilizable, cross-browser, sin js y solo requiere un pequeño margen adicional.
Adam Tomat

Si el texto es más grande que el cuadro, se desbordará. He intentado varias formas de evitar el desbordamiento, pero aparentemente todos entran en conflicto con la visualización de tablas y celdas de tablas. Tan pronto como restrinja el desbordamiento, el centrado vertical deja de funcionar. jsfiddle.net/2HHLE ¿ Alguna idea?
Thomas David Baker,

Para responder a mi propia pregunta si coloca los div (s) de tabla / celda de tabla en otro div con ancho / alto fijo y desbordamiento: oculto que hará el truco. Lo escribí en bluebones.net/2013/03/…
Thomas David Baker,

2
@ThomasDavidBaker, la otra solución si necesita que estos sean dinámicos es establecer una altura del 100%. He aquí una jsFiddle , básicamente, acaba de cambiar height: 100px;a height: 100%;tanto para el licomo para .outerContainer.
Adam Tomat

2
No quiero ser un narrador aquí, pero en la segunda solución de zerosixthree. Hay un error tipográfico en el CSS en "- wekbit -transform: translateY (-50%);" Aún así, muchas gracias !! ¡Gran solución!
Gnagy

186

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.


Corto y dulce ... la forma en que debería ser hacer algo tan simple. Funciona en IE 11, Chrome y Firefox ... lo suficientemente bueno para mí
splashout

Esta respuesta funciona con el texto de posicionamiento dentro de objetos extraños en svg. ¡Gracias!

1
Creo: ¡Flex es un remedio para todo!
DenisKolodin

1
text-align: centertambién es necesario, porque el ancho de relleno de texto largo se alineará a la izquierda
DenisKolodin

Siempre tuve problemas con esto, y odio absolutamente la respuesta de aumentar la altura de la línea. Esto funcionó muy bien.
Jed Lynch

109

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.


3
Obtuve resultados más confiables con position: absolute;- ¡Gracias! Nota: es posible que desee incluir -ms-transformo IE rellenará algo más
Wilf

Plunker sugiere poner -web-kit-transformantes transform. Quizás agregar -ms-transformpuede resolver el problema de @ ToniMichelCaubet.
sakovias

39

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 .

Ingrese la descripción de la imagen aquí


2
¡Gran idea! display: table-cell tiene otros efectos, pero si está de acuerdo con ellos, esta es una buena solución
Brian Low

También es importante agregar la altura del elemento.
Elan Perach

Desafortunadamente desbordamiento: oculto no funciona en la pantalla: table-cell
TheJeff

32

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>


2
@Imray básicamente está agregando un elemento de bloque en línea de 0px de ancho al lado del texto (el pseudo: antes). Sin embargo, este bloque falso tiene una altura del 100%, que es el truco. Como el bloque y el texto están alineados en v, se procesa según lo previsto.
Dan H

1
mejor respuesta, solución limpia, compatible con IE8
Rocco

Cuando el texto se ajusta, puede tener problemas con esto. Lo arreglé agregando lo siguiente al elemento anidado: ancho: 95%; alineación vertical: medio;
trgraglia

Si el texto es demasiado largo, no funciona. ¿tienes una solución? jsfiddle.net/cyxuy95q
beta

Como se sugirió en el comentario anterior, establezca un ancho máximo del 95% jsfiddle.net/cyxuy95q/1
Toni Michel Caubet

28

Pruebe esto, agregue el div padre:

display: flex;
align-items: center;

1
Me gusta este - Simple y funciona en navegadores modernos
Casper Skovgaard

8

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 .


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>

Funcionó como un encanto cuando se alinea verticalmente: medio; y todo lo demás falló.
Chiwda

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

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


5

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

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


4

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

4

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 .


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

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

4

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

3

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.


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

1
El padre padre necesitaría posición: pariente
Toni Michel Caubet

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


0

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/


1
Agradable porque es la solución más simple. Lo malo es que solo funciona para texto de una sola línea, vea la bifurcación del ejemplo con texto más largo. jsfiddle.net/6sWfw
Tomas Tintera

0

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>


0

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>


0

Intenta incrustar un elemento de tabla.

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


66
Las tablas son solo para tratar con datos tabulares. Nunca deben usarse para solucionar problemas de diseño.
Micros

3
Sin embargo, lo bueno de las tablas es que siempre son consistentes: CSS se interpreta de muchas maneras diferentes y poner DIV anidados solo para hacer algo simple agrega HTML adicional (y confusión). CSS todavía tiene
grandes

44
Sí, desafortunadamente esta ES LA ÚNICA forma confiable de alinear verticalmente (desconocido) el texto en un bloque. ¿Por qué los dioses CSS odian tanto a Valign? (TODOS los navegadores PUEDEN hacerlo de manera consistente, pero solo en las celdas de la tabla)
T4NK3R

-1

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&nbsp;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>

-2

CSS:

.vertical {
   display: table-caption;
}

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


-2

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

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.