Centrar horizontal y verticalmente con line-height

Centrar horizontal y verticalmente con line-height

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:

Sutil Web
Sutil Web - Tu sueño hecho diseño

Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt mauris interdum convallis metus suspendiss lacus est.