Центрирование div, margin: 0 auto; не работает
После поиска по центру моего div все, что я мог получить, это margin: 0 auto; вместе с заданной шириной, но все равно не работает.
Моя проблема просто центрирует div. Я понятия не имею, почему margin: 0 auto; не работает.
Вот макет моего CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}<div class = "countdown-box"></div>@Faizan Khan Я хочу центрировать его по горизонтали
Вы полностью позиционировали элемент, то есть удалили его из потока документов. Следовательно, он не будет учитывать поля, как относительные или статические элементы.
Ответы 3
Это потому, что вы используете position: absolute;. Измените его на position: relative;, и он будет работать.
маржа: авто работает с элементами с относительным положением. Чтобы центрировать с абсолютной позицией, должно быть похоже на следующий CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}<div class = "countdown-box"></div>На самом деле margin auto будет выделять доступное пространство, а это значит, что оно не имеет никакого отношения к тому, относительное оно или нет.
<div class = "centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
вы хотите центрировать div по горизонтали или по горизонтали и по вертикали?