Centrage horizontal et vertical — navigateurs modernes

dabblet.css

/**
 * Centrage horizontal et vertical — navigateurs modernes
 */
html, body {
    height: 100%;
    margin: 0;
    width: 100%;
}
.layout {
    display: table;
    height: 100%;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.layout-wrapper {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
.layout-content {
    display: inline-block;
    text-align: left; /* Retour à l'alignement classique, non nécessaire */
}

dabblet.html

<div class="layout">
    <div class="layout-wrapper">
        <div class="layout-content">
            Vous êtes<br />
            centré !
        </div>
    </div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}