A Pen by Guillermo Dolores.

Center-element-horizontally.markdown

Center element horizontally

This is a very simple example for a friend

A Pen by Guillermo Dolores on CodePen.

License.

index.html

<div class="mi-contenedor-centrado">
    <h1>YOLO</h1>
    <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nam, aliquid, debitis, soluta numquam necessitatibus quam illum iste enim blanditiis nostrum incidunt voluptatibus quis assumenda nemo quasi voluptatum dolorem reprehenderit.</em></p>
</div>

style.css

body {
            margin: 0;
            padding: 0;
            background: rgb(107, 116, 218);
            font: 16px/1.2 Arial, Helvetica;
        }
        .mi-contenedor-centrado {
            margin: 2em auto 0; /* El valor AUTO para izquierda y derecha permite centrar horizontalmente el contenido en relación a su padre (en este caso BODY)  */
            border: 5px solid white;
            padding: 1em;
            width: 400px;
            background: rgb(107, 218, 178);
            border-radius: 5px;
            text-align: center;
        }
        h1 {
            font-family: Georgia;
            font-size: 4em;
            text-shadow:2px 5px 8px rgba(0, 0, 0, 0.58);
        }