Как центрировать абсолютный div горизонтально с помощью CSS?

У меня есть div и хочу, чтобы он был центрирован по горизонтали - хотя я даю ему margin:0 auto; он не центрирован...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}
+167
31 июл. '13 в 17:26
источник поделиться
8 ответов

Вам нужно установить left: 0 и right: 0.

Это указывает, как далеко смещать края полей от сторон окна.

Как и "top", но указывает, насколько далеко край правого поля смещен к [left/right] от края [right/left] края поля, содержащего блок.

Источник: http://www.w3.org/TR/CSS2/visuren.html#position-props

Примечание. Элемент должен иметь ширину меньше, чем окно, иначе он займет всю ширину окна.

Если бы вы могли использовать медиа-запросы, чтобы указать минимальное поле, а затем перейти к auto для больших размеров экрана.


.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}
<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>
+384
31 июл. '13 в 17:44
источник

Это не работает в IE8, но может быть вариантом для рассмотрения. Это в первую очередь полезно, если вы не хотите указывать ширину.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
+114
19 нояб. '14 в 19:42
источник

Несмотря на то, что выше ответы правильные, но для новичков это просто, все, что вам нужно сделать, это установить margin, left и right. следующий код сделает это при условии, что ширина установлена ​​ и позиция абсолютна:

margin: 0 auto;
left: 0;
right: 0;

Demo:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }
<div class="centeredBox">Centered Box</div>
+13
05 февр. '16 в 7:14
источник

Flexbox? Вы можете использовать flexbox.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}
<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>
+5
16 июн. '16 в 2:39
источник
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
+3
16 июн. '16 в 1:44
источник

так просто, используйте только поля и левые, правые свойства:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

Вы можете увидеть больше в этом совете = > Как установить элемент div в центр в html-блоге Obinb

+2
26 окт. '16 в 14:47
источник

Вот ссылка, пожалуйста, используйте это, чтобы сделать div в центре, если позиция абсолютная.

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

Пример jsfiddle

0
31 июл. '18 в 16:52
источник

Вы не можете использовать элементы margin:auto; on position:absolute;, просто удалите их, если это вам не нужно, однако, если вы это сделаете, вы можете использовать left:30%; ((100% -40%)/2 ) и медиа-запросы для значений max и min:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}
-1
31 июл. '13 в 17:33
источник

Посмотрите другие вопросы по меткам или Задайте вопрос