<body>
        <h1>Ejemplos</h1>
        <div class="contenedor0">
                <div class="contenido0">
                        Contenido a alinear
                </div>
        </div>
        <hr />
        <div class="contenedor1">
                <div class="contenido1">
                        Método 1: table-cell
                </div>
        </div>
        <hr />
        <div class="contenedor2">
                <div class="contenido2">
                        Método 2: line-height 50%
                </div>
        </div>
        <hr />
        <div class="contenedor3">
                <div class="contenido3">
                        Método 3: Flexbox
                </div>
        </div>
<body>
        /* Colores y tamaños */
        .contenedor0, .contenedor1, .contenedor2, .contenedor3 {
                background-color: lightgreen;
                width: 300px;
                height: 150px;
        }
        .contenido0, .contenido1, .contenido2, .contenido3 {
                background-color: lightblue;
                width: 200px;
                height: 100px;
        }
        /* *********************************************** */
        .contenedor0 {
                vertical-align: middle;
        }
        /* *********************************************** */
        .contenedor1 {
                display: table-cell;
                vertical-align: middle;
                text-align: center; /* requerido para alineación horizontal */
        }
        .contenido1 {
                display: inline-block;
                text-align: left; /* requerido para volver a alinear texto izquierda */
        }
        /* *********************************************** */
        .contenedor2 {
                line-height: 150px;
                text-align: center; /* requerido para alineación horizontal */
        }
        .contenido2 {
                line-height: 1;
                display: inline-block;
                vertical-align: middle;
                text-align: left; /* requerido para volver a alinear texto izquierda */
        }
        /* *********************************************** */
        .contenedor3 {
                display: flex;
                align-items: center;
        }
        .contenido3 {
                margin: 0 auto; /* requerido para alineación horizontal */
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.