Ответ 1
Я исследовал это немного и из того, что нашел, у вас есть четыре варианта:
Версия 1: родительский div с отображением в виде таблицы-ячейки
Если вы не возражаете использовать display:table-cell в своем родительском div, вы можете использовать следующие параметры:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Версия 2: родительский div с отображением и отображением таблицы содержимого таблицы
.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;
}
Версия 3: родительский div-плавающий и контент-div как отображаемая таблица-ячейка
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Версия 4: Родительская позиция div относительно абсолютной позиции содержимого
Единственная проблема, с которой я столкнулся с этой версией, заключается в том, что вам, похоже, придется создавать css для каждой конкретной реализации. Причина этого заключается в том, что для содержимого div должна быть задана высота, которую будет заполнять ваш текст, и верхняя граница будет выведена из этого. Эту проблему можно увидеть в демонстрации. Вы можете заставить его работать для каждого сценария вручную, изменив высоту% вашего содержимого div и умножив его на -.5, чтобы получить максимальное значение маржи.
.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;
}