En ce week-end pas du tout attendu tant nous aimons notre travail, voici une astuce très utile. Nous avons déjà vu comment centrer verticalement un texte. Ici nous faisons la même chose avec une boite.

Centrer une box verticalement par rapport à son conteneur

 

Voici mon exemple :

Cool cette div est centrée verticalement !

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Le html :


<div class="contenant">
    <div class="truccentre">
       <p>Cool cette div est centrée verticalement !</p>
    </div>
    <div class="trucnormal">
       <p>Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti  fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</p>
    </div>
    <div class="clearer"></div>
</div>

et le css :


.contenant {
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 24em;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.contenant div {
    float: left; 
    width: calc(50% - 30px); 
    padding:15px;}