Os dejamos un ejm de como centrar tanto horizontal como verticalmente utilizando la propiedad line-height con unas pocas líneas de código.
El código es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.centrado {
line-height: 300px;
height: 300px;
border: 1pxsolidblue;
text-align: center;
width: 800px;
margin: auto;
}
.centrado p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Centrar horizontal y verticalmente con line-heigh</h1>
<p>Este texto no está centrado</p>
<div class="centrado">
<p>Este texto sí está centrado</p>
</div>
</body>
</html>
El resultado sería el siguiente:
