Centrar las cosas en CSS es el ejemplo secundario de las quejas de CSS. ¿Por qué tiene que ser tan difícil? Se burlan. Creo que el problema no es que sea difícil de hacer, sino que hay tantas formas diferentes de hacerlo, dependiendo de la situación, es difícil saber cuál buscar.
Así que hagámoslo un árbol de decisiones y, con suerte, hagámoslo más fácil.
Necesito centrar …
Horizontalmente
¿Son elementos en línea o en línea- * (como texto o enlaces)?
Puede centrar elementos en línea horizontalmente, dentro de un elemento padre a nivel de bloque, con solo:
.center {
text-align: center;
}Esto funcionará para inline, inline-block, inline-table, inline-flex, etc.
¿Es un elemento de nivel de bloque?
Puede centrar un elemento a nivel de bloque dándole margin-left y margin-right de auto (y tiene un conjunto width, de lo contrario sería de ancho completo y no necesitaría centrarse). Eso a menudo se hace con taquigrafía como esta:
.center-me {
margin: 0 auto;
}Esto funcionará sin importar el ancho del elemento de nivel de bloque que está centrando, o el padre.
Tenga en cuenta que no puede float un elemento al centro. Aunque hay un truco.
¿Hay más de un elemento a nivel de bloque?
Si tiene dos o más elementos a nivel de bloque que deben centrarse horizontalmente en una fila, es probable que le sirva mejor si los hace de una manera diferente. display escribe. Aquí hay un ejemplo de cómo hacerlos. inline-block y un ejemplo de flexbox:
A menos que quiera decir que tiene varios elementos de nivel de bloque apilados uno encima del otro, en cuyo caso la técnica de margen automático sigue estando bien:
Verticalmente
El centrado vertical es un poco más complicado en CSS.
¿Son elementos en línea o en línea- * (como texto o enlaces)? ¿Es una sola línea?
A veces, los elementos en línea / de texto pueden aparecer centrados verticalmente, solo porque hay un relleno igual por encima y por debajo de ellos.
.link {
padding-top: 30px;
padding-bottom: 30px;
}Si el relleno no es una opción por alguna razón, y está tratando de centrar un texto que sabe que no se ajustará, hay un truco para hacer el line-height igual a la altura será center el texto.
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}¿Son varias líneas?
El relleno igual en la parte superior e inferior también puede dar el efecto de centrado para varias líneas de texto, pero si eso no va a funcionar, tal vez el elemento en el que se encuentra el texto puede ser una celda de tabla, ya sea literalmente o para comportarse como una con CSS. El vertical-align La propiedad maneja esto, en este caso, a diferencia de lo que normalmente hace, que es manejar la alineación de elementos alineados en una fila. (Más sobre eso.)
Si algo similar a una tabla está fuera, ¿quizás podría usar flexbox? Se puede hacer que un solo niño flexible se centre en un padre flexible con bastante facilidad.
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}Recuerde que solo es realmente relevante si el contenedor principal tiene una altura fija (px,%, etc.), por lo que el contenedor aquí tiene una altura.
Si ambas técnicas no funcionan, puede emplear la técnica del “elemento fantasma”, en la que se coloca un pseudoelemento de altura completa dentro del contenedor y el texto se alinea verticalmente con él.
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}¿Es un elemento a nivel de bloque? ¿Conoce la altura del elemento?
Es bastante común no conocer la altura en el diseño de la página web, por muchas razones: si cambia el ancho, el reflujo del texto puede cambiar la altura. La variación en el estilo del texto puede cambiar la altura. La variación en la cantidad de texto puede cambiar la altura. Los elementos con una relación de aspecto fija, como las imágenes, pueden cambiar de altura cuando se redimensionan. Etc.
Pero si conoce la altura, puede centrar verticalmente como:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}¿Es el elemento de altura desconocida?
Todavía es posible centrarlo empujándolo hacia arriba la mitad de su altura después de golpearlo hacia abajo hasta la mitad:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}¿Te importa si el elemento estira la altura del contenedor?
Si no lo hace, solo necesita el contenido dentro centrado verticalmente, el uso de tablas o visualización CSS para convertir elementos en tablas puede hacer el truco.
¿Puedes usar flexbox?
No es una gran sorpresa, esto es mucho más fácil en flexbox.
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}También puede centrarse en flexbox usando margin: auto; en el elemento hijo.
Tanto horizontal como verticalmente
Puede combinar las técnicas anteriores de cualquier manera para obtener elementos perfectamente centrados. Pero encuentro que esto generalmente se divide en tres campos:
¿El elemento es de ancho y alto fijos?
El uso de márgenes negativos iguales a la mitad de ese ancho y alto, después de haberlo posicionado absolutamente al 50% / 50%, lo centrará con una excelente compatibilidad con varios navegadores:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}¿Es el elemento de ancho y alto desconocidos?
Si no conoce el ancho o el alto, puede usar la propiedad de transformación y una traducción negativa del 50% en ambas direcciones (se basa en el ancho / alto actual del elemento) para centrar:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}¿Puedes usar flexbox?
Para centrar en ambas direcciones con flexbox, necesita usar dos propiedades de centrado:
.parent {
display: flex;
justify-content: center;
align-items: center;
}¿Puedes usar la cuadrícula?
Esto es solo un pequeño truco (enviado por Lance Janssen) que funcionará prácticamente para un elemento:
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}Conclusión
Puedes centrar totalmente las cosas en CSS.