Centrar página web verticalmente con HTML y CSS

Durante la fase de maquetación de un desarrollo web a veces es necesario tener que centrarla verticalmente o a un elemento de ella para que quede siempre a mitad de pantalla sea cual sea la resolución a la que se acceda. Para conseguirlo existen diversas maneras que incluyen también usar programación, pero aquí veremos algunas utilizando solo HTML y CSS.

Centrar verticalmente con top de CSS

Una posibilidad que tenemos a nuestra disposición es valernos de la propiedad top. Esta propiedad nos permite posicionar un elemento de HTML en relación con el borde superior de la ventana del navegador. De modo que indicando que queremos ubicar el contenedor al 50%, lo desplazará al centro. Sin embargo lo que se desplaza al centro será la parte superior del elemento y no su centro, por lo que necesitaremos corregir ese desfase con la propiedad transform: translateY(-50%) que lo moverá hacia arriba la mitad de su alto.

.contenedor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Ten en cuenta que la propiedad top necesita que el elemento esté definido como position: absolute o relative, de lo contrario lo anterior no funcionará.

Centrar verticalmente con flexbox de CSS

Otro opción a tener en cuenta es hacer uso del sistema flexbox de CSS que ya se encuentra ampliamente extendido entre los navegadores. Para ello crearemos un contenedor que envolverá la web y le asignaremos la propiedad display: flex. Después añadiremos la propiedad align-items: center, de este modo lo que se encuentre en su interior se centrará verticalmente.

<div class="contenedor">
    <div>
        Aquí iría la web o el elemento a centrar verticalmente.
    </div>
</div>

#contenedor{
    display: flex;
    align-items: center;
}

Centrar verticalmente con table de CSS

En CSS podemos emular a las tablas de HTML y su posibilidad de alinear verticalmente el contenido interior. El modo de empleo es crear primero un contenedor al que le asignaremos la propiedad display: table para que se comporte como tal. En su interior crearemos otro que hará las veces de celda con la propiedad display: table-cell y usando vertical-align: middle haremos que esta celda se centre.

<div class="contenedor">
    <div class="web">
        Aquí iría la web o el elemento a centrar verticalmente.
    </div>
</div>

.padre {
    display: table;
    height:200px;
}
.hijo {
    display: table-cell;
    vertical-align: middle;
}

Para terminar, si quieres seguir viendo diferentes opciones de centrado a la hora de maquetar, como profesional freelance te recomiendo que consultes este otro artículo en el que explico también cómo centrar horizontalmente una web usando HTML y CSS.