Si conoce el ancho/alto exacto de un elemento, puede centrarlo justo en el medio de su elemento principal fácilmente con este truco clásico: arriba y a la izquierda configurados al 50% y márgenes negativos a la mitad del ancho y alto del elemento. Eso es genial si conoce el ancho y la altura del elemento que está tratando de centrar, pero ¿qué pasa si son porcentajes?
Uno pensaría que podría usar márgenes porcentuales negativos. Eso funciona para los márgenes horizontales, pero los márgenes se basan en el ancho (incluso los márgenes verticales), por lo que se descompone cuando intenta usar el margen superior negativo para colocar las cosas en su lugar.
Hay un pequeño truco que involucra un pseudo elemento “fantasma” y un bloque en línea/alineación vertical que es bastante inteligente. Pero eso requiere que el elemento que está centrando sea un bloque en línea y ese no es un escenario común real. Lo más probable es que esté tratando de centrar algo como una ventana modal justo en el centro. Y dado que las pantallas pequeñas y el diseño receptivo son un gran negocio, es muy probable que desee que su cuadro de diálogo tenga un ancho porcentual (o desconocido, como tener solo un ancho máximo).
¡Hay una manera! Vi este truco usado por Mary Lou en Codrops y su artículo/demostración Nifty Modal Window Effects.
En lugar de usar márgenes negativos, usa márgenes negativos. translate() transforma
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}Usa los prefijos que necesites en estos días.
Ahí estamos entonces: