En este post de hoy te voy a mostrar algunos métodos actuales para centrar verticalmente con CSS cualquier elemento en la pantalla y también horizontalmente. En los tres primeros ejemplos voy a utilizar propiedades y métodos para navegadores actuales. Como alternativa te mostraré un cuarto ejemplo que utiliza propiedades que si podrás aplicar en navegadores más antiguos ( explorer10 o similares).
Para estos ejemplos de alineación vertical utilizaré estas dos propiedades: transform, flexbox. Además de la unidad de medida vh. Todas ellas pueden utilizarse en los siguientes browsers:
1. Centrar verticalmente con Transform:
|
1 2 3 4 5 6 |
<div class="padre-transform"> <div> <h1>Continuar</h1> <h2>Subtitulo</h2> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.padre-transform{ background: #A8C7D6; height: 100vh; min-height:600px; } .padre-transform > div{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); max-width: 50%; text-align: center; } |
Explicación
Con 100vh le indicamos que nuestro contenedor mida la altura de nuestro dispositivo. Si nuestro monitor mide 800px de altura está será la medida de nuestra capa.
Es muy importante agregar el atributo min-height para indicar una altura mínima. Ya que si cargamos este ejemplo en un móvil en apaisado la capa sólo mediría 320px de altura. Con min-height nos aseguramos que nunca mida menos de 600px.
Para el hijo utilizamos position:absolute. Con Top:50% y left:50% posicionamos la esquina superior izquierda de nuestra caja en el centro de la pantalla. Y con transform:translate(-50%,-50%). Estos porcentajes hacen referencia a la medida de la caja. Es decir si la caja mide 500px de ancho, la estaríamos desplazando 250px a la izquierda. Si mide 100px de altura la desplazamos 50px hacia arriba. Con ello conseguimos posicionarla en el centro.
2. Centrar verticalmente con Flexbox:
https://caniuse.com/
|
1 2 3 4 5 6 |
<div class="padre-flex"> <div class="content"> <h1>Contenido</h1> <h2>Subtitulo</h2> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.padre-flex{ background: #A8C7D6; height: 100vh; display: flex; align-items: center; justify-content: center; } .padre-flex > div{ text-align: center; } |
Seguimos utilizando la unidad 100vh para el contenedor padre. También utilizamos la propiedad display:flex. La propiedad flex es una de las últimas maravillas de CSS que nos facilitan mucho la vida a los maquetadores y diseñadores. Ya que resulta muy sencillo trabajar y modular el espacio. Si te interesa conocer más acerca de ella te dejo puedes consultar esta pequeña guía:
Además si quieres practicar con ella también te puede interesar esta web. Es un pequeño juego que te ayudará a entender como funciona: https://flexboxfroggy.com/#es
En mi ejemplo con la propiedad align-items: center alineamos el contenido en el centro de la pantalla y la propiedad justify-content: center la alineamos horizontalmente.
3. Centrar verticalmente con display:table
|
1 2 3 4 5 6 |
<div class="padre-table"> <div class="content"> <h1>Contenido</h1> <h2>Subtitulo</h2> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.padre-table{ display: table; background: #A8C7D6; height:600px; width: 100%; background: red; } .padre-table > div{ display: table-cell; vertical-align: middle; text-align: center; } |
Para centrar verticalmente con este este método tenemos que agregar display:table-cell al contenedor hijo. Así conseguiremos que se comporte como una celda de las antiguas tablas y podemos agregar la propiedad vertical-align: middle.
4. Centrar verticalmente con position absolute y márgenes negativos
|
1 2 3 4 5 |
<div class="padre-negativos"> <div> <h1>Contenido alineado con position:absolute y margenes negativos</h1> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.padre-negativos{ background: #FFE2E5; height: 800px; position: relative; } .padre-negativos > div{ position: absolute; top: 50%; left: 50%; width: 80%; height: 70px; margin-top: -35px; /* Este valor es el resultado de dividir entre 2 height: 70*/ margin-left: -40%; /* Este valor es el resultado de dividir entre 2 : width:80% */ color: #333; text-align: center; background: rgba(0,0,0,0.1) } |
Este es el método que más navegadores soportan. El inconveniente de este método es que tenemos que trabajar con medidas fijas para el alto. Para centrar el contenedor hijo tenemos que restar la mitad de su altura y anchura con la propiedad margin-top y margin-left
¿Qué te han parecido estos métodos? ¿Conoces otros mejores?
Tanto si te han gustado como si conoces otros mejores métodos para alinear verticalmente con CSS puedes dejar tu opinión en los comentarios. Espero que los puedas utilizar en tus proyectos 🙂
Probé el primero, y con eso tuve, muchas gracias.
Me alegro Gerard!