J'ai fait un peu de recherche et d'après ce que j'ai trouvé, vous avez quatre options:
Version 1: div parent avec affichage sous forme de cellule de tableau
Si cela ne vous dérange pas d'utiliser le display:table-cell
sur votre div parent, vous pouvez utiliser les options suivantes:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
DÉMO en direct
Version 2: div parent avec bloc d'affichage et cellule-table d'affichage de contenu
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
DÉMO en direct
Version 3: div parent flottant et div contenu comme cellule de tableau d'affichage
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
DÉMO en direct
Version 4: position div parent relative avec position du contenu absolue
Le seul problème que j'ai eu avec cette version est qu'il semble que vous devrez créer le css pour chaque implémentation spécifique. La raison en est que le contenu div doit avoir la hauteur définie que votre texte remplira et que le haut de la marge en sera déduit. Ce problème peut être vu dans la démo. Vous pouvez le faire fonctionner pour chaque scénario manuellement en modifiant le pourcentage de hauteur de votre div de contenu et en le multipliant par -,5 pour obtenir la valeur de votre marge supérieure.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
DÉMO en direct