Блог

Главная - Вопросы по программированию - Центрирование div, поле: 0 автоматически; не работает

Центрирование div, поле: 0 автоматически; не работает

#html #css

#HTML #css

Вопрос:

После поиска по центрированию моего div все, что я смог получить, это margin: 0 автоматически; вместе с назначенной шириной, но все равно это не работает.

Моя проблема заключается в простом центрировании 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>

Комментарии:

1. вы хотите центрировать div по горизонтали или одновременно по горизонтали и вертикали?

2. @Faizan Khan Я хочу центрировать его по горизонтали

3. Вы полностью расположили элемент, что означает, что вы удалили его из потока документов. Следовательно, поля не будут учитываться так, как это делали бы относительные или статические элементы.

Ответ №1:

Это потому, что вы используете position: absolute; . Измените это на position: relative; , и это сработает.

Ответ №2:

Margin: auto работает с элементами с относительным расположением. Для центрирования с абсолютной позицией должно быть похоже на следующий 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>

Ответ №3:

На самом деле margin auto выделит доступное пространство, что означает, что оно не имеет никакого отношения к тому, является ли оно относительным или нет.

 <div class="centerize"></div>


.centerize {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: yellow;
}