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

Ответ 1

Вам нужно установить 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>

Ответ 2

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

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Ответ 3

Несмотря на то, что выше ответы правильные, но для новичков это просто, все, что вам нужно сделать, это установить 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>

Ответ 4

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

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

Ответ 6

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

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

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

Ответ 7

Вот ссылка, пожалуйста, используйте это, чтобы сделать 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

Ответ 8

Вы не можете использовать элементы 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;
    }

}