Muchas veces noté que a las personas les resulta muy difícil alinear el contenido al centro, ya sea vertical u horizontalmente usando CSS ?.
Así que decidí escribir algunas formas de alinear el contenido al centro usando CSS ?.
Centrar texto en CSS.
Entonces, comencemos con el fácil alinear texto al centro de la pantalla. Para hacer eso, simplemente usa el estilo text-align:center en la etiqueta específica que deseas alinear el texto al centro.
<!DOCTYPE html>
<html>
<head>
<title>center align content</title>
</head>
<body>
<h1 style="text-align: center;">? is center aligned</h1>
<p>? still in left</p>
</body>
</html>
Alinear el contenido al centro
Ahora entremos en cosas un poco complicadas. Alinear un div o cualquier contenido al centro.
Entonces, el truco es usar margin:auto y dar un ancho específico al div.
Esto devolverá el div alineado al centro horizontalmente con el elemento principal.
<!DOCTYPE html>
<html>
<head>
<title>center align content</title>
</head>
<style>
body{
margin: 0;
}
.box{
height:25rem;
background-color: blueviolet;
width: 25rem;
margin: auto;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
Para alinear una imagen al centro para una etiqueta img, solo necesitas agregar una propiedad CSS más que sea display:block.
<!DOCTYPE html>
<html>
<head>
<title>center align content</title>
</head>
<style>
body{
margin: 0;
}
.imgCenter{
display: block;
background-color: blueviolet;
margin: auto;
}
</style>
<body>
<img class="imgCenter" src="https://i.chzbgr.com/full/7588073728/h78549C5D/not-sure-if-i-hate-css-or-i-hate-designers"/>
</body>
</html>
Supongamos que deseas alinear div tanto vertical como horizontalmente con el centro del elemento principal, entonces puedes hacerlo con el siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.centerBox {
margin: 0;
position: absolute;
background-color: blue;
height:15rem;
width:15rem;
top: 50%;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="centerBox"></div>
</body>
</html>
Usando flex para alinear el contenido al centro
Una forma aún mejor de alinear el contenido al centro es usando las propiedades flex.
Supongamos que deseas alinear div horizontalmente con el centro del elemento principal. Luego, debes aplicar las propiedades display: flex; align-items: center; justify-content: center; al elemento principal.
<!DOCTYPE html>
<html>
<head>
<title>center align content</title>
</head>
<style>
body{
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Supongamos que deseas alinear vertical y horizontalmente div con el centro del elemento principal, entonces necesitas agregar el siguiente estilo html y etiquetar body.
html, body { height: 100%; } y dar algo de altura al elemento principal.
Eso es todo, el contenido debe estar alineado vertical y horizontalmente con el elemento principal.
El siguiente fragmento muestra cómo se puede alinear un div con el centro.
<!DOCTYPE html>
<html>
<head>
<title>center align content</title>
</head>
<style>
html, body {
height: 100%;
}
body{
margin: 0;
}
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Felicidades estamos al final de este post. Espero que hayas disfrutado el tema, otro día más.