Я хочу центрировать div, который добавляется внутри другого div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Это CSS, который я использую в настоящее время.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Как вы можете видеть, подход, который я использую сейчас, зависит от значений ширины и высоты innerDiv
. Если изменяется ширина/высота, мне придется изменить значения margin-top
и margin-left
. Там есть общее решение, которое я могу использовать для центрирования innerDiv
всегда независимо от его размера?
Я понял, что использование margin:auto
может горизонтально привязывать внутреннюю область к середине. Но что относительно вертикального аллигмента среднего?