JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<p>Technique 1 : <code>display:table;</code></p>
<div class="wrap">
    <img src="http://placekitten.com/500/250" alt="">
    <div class="container table">
        <div class="content table-cell">
            Texte centré
        </div>
    </div>
</div>
<p>Technique 2 : <code>transform:translateY;</code></p>
<div class="wrap">
    <img src="http://placekitten.com/500/250" alt="">
    <div class="container">
        <div class="content position">
            Texte centré
        </div>
    </div>
</div>
<p>Technique 3 : élément fantôme</p>    
<div class="wrap">
    <img src="http://placekitten.com/500/250" alt="">
    <div class="container v-align-wrap">
        <div class="content v-align">
           Texte centré
        </div>
    </div>
</div>

CSS

/* Mini reset */
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body {font-family:Arial; text-align: center;}
img {max-width:100%; vertical-align: bottom;}

/* Technique 1 : display:table; */
.table {display: table; width: 100%;}
    .table-cell {display: table-cell; vertical-align: middle;}

/* Technique 2 : transform:translateY */
.position {position: relative; top: 50%; transform: translateY(-50%);}

/* Technique 3 : élément fantôme */
.v-align-wrap {letter-spacing:-0.31em;}
.v-align-wrap:before {content:""; display: inline-block; height: 100%; vertical-align: middle;}
    .v-align {display: inline-block; vertical-align: middle; letter-spacing:normal; width: 100%;}

/* Contenu */
.wrap {position: relative; margin:10px auto; width:500px;}
    .container {position:absolute; top:0; bottom:0; right:0; left:0; background:rgba(64,192,203,0.5);}
        .content {padding:20px; background:#F9F2E7;}