¿Cómo se puede centrar verticalmente el texto de un <div>?

Estoy tratando de centrar verticalmente el contenido de un <div>, pero no lo consigo. El contenido está formado exclusivamente por texto. ¿Alguna idea de cómo conseguirlo?

Estás leyendo una traducción autorizada de la pregunta Vertically Align text in a Div planteada por shinjuo en StackOverflow.

Respuestas

Aunque aparentemente se trata de algo muy sencillo, centrar verticalmente un contenido de texto en un <div> de cualquier tamaño es algo extremadamente complejo, debido al distinto comportamiento de los navegadores. Así que estas son algunas de las soluciones que puedes probar para resolver el problema:

Solución mediante Flexbox, que requiere obviamente el soporte de flexbox por parte del navegador. Te funcionará en cualquier navegador moderno e incluso en Internet Explorer 10 o superior:

div {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

Solución mediante transformaciones CSS, que funciona en Internet Explorer 9 o superior y el resto de navegadores modernos:

div {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Solución tradicional, que debería funcionarte en cualquier navegador, incluso en las versiones más antiguas de Internet Explorer.

Esta solución requiere añadir más <div> dentro de tu elemento:

<div class="contenedorExterior">
    <div class="contenedorInterior">
        <div class="elemento">
            <!-- Contenido -->
        </div>
    </div>
</div>

.contenedorExterior {
    display: table;
    width: 100px; /* anchura del padre */
    height: 100px; /* altura del padre */
    overflow: hidden;
}
.contenedorExterior .contenedorInterior {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.elemento {
    background: #ddd;
    width: 100px;
    height: 100px;
}

@librosweb

11 octubre 2014, 23:05

A mi me sirvió colocando un css indicando la mitad de la altura y la mitad de la anchura a la tag

. Explico en código:

<p  style="margin-left: 10%; margin-top: 5%"> Texto </p>

Me es bueno declarar que eso estaba dentro de un contenedor (div), en el cual se puede centrar de forma similar, pero esto siguiente es para quedar en medio de la pantalla, y no para quedar el texto en medio del contenedor, como el código anterior.

/*Posicionar en el medio*/
top: 50vh;
   /*Midad de la Altura menos Mitad de la Anchura de la div*/
left: calc(50% - 15%);

En este caso, mi Div era del 30% de anchura, lo podeis hacer notar colocando un "background-color" temporal. Espero les tenga servido como hize.

@Buchu_MBO

26 agosto 2017, 22:13