En el proceso de crear un diseño web es muy común requerir cierto tipo de posicionamiento de los elementos en zonas específicas. Uno de los más requerido es el centrado absoluto de un elemento tanto horizontal como verticalmente.
Realizar un centrado horizontal de un elemento es relativamente sencillo y, dependiendo del tipo de elemento, existen varias técnicas que permiten hacerlo. Por ejemplo, si es un elemento en línea bastaría con aplicarle al elemento la propiedad CSS de `text-align: center;` mientras que si es un elemento en bloque solo sería necesario definir un ancho o `width` para el elemento y `margin: auto;`.
Un elemento en línea (inline) se posiciona uno al lado del otro ocupando solo el ancho de su contenido. Por ejemplo: a, span, b, img, button, label, input. En cambio, un elemento en bloque (block-level) toma el ancho total del contenedor, por tanto es un solo elemento por línea. Por ejemplo: div, table, form, ul, li, p, h1.
Sin embargo, cuando hablamos de centrado vertical la historia es otra, ya que no resulta tan obvia la forma de conseguirlo. Anteriormente, era necesario posicionar de forma absoluta un elemento respecto a su contenedor y esto muchas veces genera problemas con el responsive design; pero desde la aparición de Flex en CSS este tipo de problemas se volvió cosa del pasado.
Para realizar un centrado absoluto (centrado vertical y horizontal al mismo tiempo) debemos establecerle al contenedor padre un display: flex; y adicionarle las propiedades align-items: center; y justify-content: center; y de esta manera los elementos hijos se centrarán de forma rápida y fácil.
Es importante tomar en cuenta que adicionalmente el contenedor padre debe tener una altura definida.
Apoyándonos un poco en Bootstrap para dar estilos rápidamente podremos ver en el ejemplo cómo centrar un formulario de login de forma absoluta dentro de un div.
<div class="container">
<div class="abs-center">
<form action="#" class="border p-3 form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
Del código mostrado puede destacarse que el contenedor padre (div) tiene la clase abs-center y el hijo, en este caso el formulario (form), se le asignó una clase form solo para gestionar su ancho, cuestión de que no ocupe el total del contenedor por ser un elemento en bloque.
Entonces para que pueda alinearse correctamente es necesario añadir las clases al código CSS:
.abs-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.form {
width: 450px;
}
Lo más destacable en este fragmento de código es la aplicación de display: flex; el cual vuelve al contenedor un elemento flex. Con justify-content: center; le decimos a los elementos del contenedor flex que se ubiquen al centro del eje principal (el eje horizontal en este caso) y con align-items: center; estamos diciendo que queremos que los elementos dentro del contenedor flex se ubiquen en el centro del eje secundario (en este caso el vertical).
Por otro lado, el centro vertical toma en cuenta la altura del contenedor, por tanto se le asigna la propiedad min-height: 100vh; que significa tome como altura mínima del contenedor el total del alto de la ventana del navegador web utilizado.
vh es una unidad de medida relativa al 1% del alto del viewport, el cual es el tamaño de la ventana del navegador. Por ejemplo si el viewport es 80cm de alto entonces 1vh = 0.8cm
Material relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
