Ces deux solutions ne nécessitent que deux éléments imbriqués.
Première - Positionnement relatif et absolu si le contenu est statique (centre manuel).
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
ou pour une conception fluide - pour le centre de contenu exact, utilisez plutôt l'exemple ci-dessous:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
Vous devez définir «hauteur min» au cas où le contenu dépasserait 50% de la hauteur de la fenêtre. Vous pouvez également manipuler cette hauteur avec une requête multimédia pour les appareils mobiles et tablettes. Mais seulement si vous jouez avec un design réactif.
Je suppose que vous pouvez aller plus loin et utiliser un simple script JavaScript / JQuery pour manipuler la hauteur minimale ou la hauteur fixe s'il y a un besoin pour une raison quelconque.
Deuxièmement - si le contenu est fluide, vous pouvez également utiliser les propriétés css de table et de cellule de tableau avec un alignement vertical et un alignement du texte centré:
/*in a wrapper*/
display:table;
et
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
Fonctionne et s'adapte parfaitement, souvent utilisée comme solution de conception Web réactive avec des mises en page de grille et des requêtes multimédias qui manipulent la largeur de l'objet.
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
https://jsfiddle.net/GlupiJas/4daf2v36/
Je préfère une solution de table pour le centrage exact du contenu, mais dans certains cas, le positionnement absolu relatif fera mieux, surtout si nous ne voulons pas conserver la proportion exacte d'alignement du contenu.