soy Kseso y esto EsCSS

Centrado horizontal y vertical con pseudoelemento CSS ::before

Centrado horizontal y vertical con pseudoelemento CSS ::before

·Por Kseso ✎ 5

La típica situación de alinear horizontal y verticalmente un elemento en su contenedor, ya sea el body u otro, del que se desconoce a priori su contenido y por lo tanto su altura.
La opción de posición absoluta y márgen negativo del 50% de su tamaño quedaba descartada por eso mismo, desconocer el tamaño.
La única que quedaba es utilizar el display:table y sus asociados: table-cell.

El siguiente método no es nuevo, lo vi allá por septiembre del 2011 en css-tricks

Este elemento tiene añadido el atributo de html5 contenteditable="true" por lo que puedes modificar el texto que contiene para que compruebes que al modificarlo el tamaño de la caja se mantiene centrada en su contenedor.

El código css que obra la magia es demasiado sencillo como para tener que explicarlo esta vez:

.ejemplo { background: #E1C4BD; text-align: center; width: 80%; height: 300px; margin: 0 auto; } .ejemplo::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* espaciado entre .ejemplo:before y .contenido */ /* Para ver el pseudoelemento background: #9DC425; width: 5px; */ } .centrado { display: inline-block; vertical-align: middle; width: 70%; padding: 10px 15px; border: #a0a0a0 solid 1px; background: #f5f5f5; text-align: left; font-size: .9em; font-family: monospace; }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso