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


177

У меня есть 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;
}


@LoganMzz это не потому, что этот вопрос имеет известную ширину.
Давбог

Ответы:


409

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


38
Примечание: widthобязательно!
Ijas Ameenudeen

2
Ага. Это правильно ... используя "text-align: center;" и "слева: 0; справа: 0;" позволит вам в абсолютном положении div, сохраняя его горизонтально по центру.
Стерлинг Борн

3
@AlexG Я только что загрузил скрипку в IE11, и она работает. Вы можете уточнить?
Брайан Вебстер

1
@AlexG это работает в IE11, однако не будет работать, если вы не объявите ширину . У меня такая же проблема. Вы должны использовать ширину, как показано в примере.
Панама Джек

1
также необходимо, margin: autoчтобы это работало в нашем случае
Crashalot

124

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

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

Это, вероятно, будет зависеть от требований его проекта.
Крис Сельбекк

3
На данный момент также должно быть правило с префиксом -webkit-, чтобы оно работало в Safari.
Шиккедил

К сожалению, это каким-то образом применяет прозрачность окружающего div также к тексту внутри ..
dnl.re

1
Это определенно ответ. Для меня установка ширины определенно не нужна.
Майк

14

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

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

Демо-версия:

.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>


1
Это отлично работало для абсолютных изображений в ряду столбцов начальной загрузки
ZachNag

5

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>


Это на самом деле прекрасно работает для моего уникального случая. left: 0; right: 0;расширен до 100%, что не было возможным, так как дочерний элемент имел цвет фона и left: 50%; transform: translateY(-50%);не работал, потому что это ограничивало дочерний элемент шириной 50% Это было единственное решение, которое сохраняло гибкие размеры дочернего элемента (ограничивалось только поддержкой браузера). Спасибо!
Бен Дайер



0

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


-1

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

.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;
    }

}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.