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

Question

Как центрировать абсолютный 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;

}

604 8

html css center absolute

8 ответов:

Comments

Ничего не найдено.

thgaskell · Accepted Answer · 2017-11-14 12:49:50

необходимо указать left:0; right:0;.

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

http://www.w3.org/TR/CSS2/visuren.html#position-props

http://jsfiddle.net/SS6DK/

CSS
.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;
  left: 0;
  right: 0;
}
Примечание: Вы должны определить width или этот ответ будет не работает. Это означает, что этот ответ не полезен для элементов с динамикой ширины.

Adel · Accepted Answer · 2015-04-13 07:02:49

Это не работает в IE8, но может быть вариантом для рассмотрения. Это в первую очередь полезно, если вы не хотите указывать ширину.
.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Meta Pakistani · Accepted Answer · 2017-02-27 05:53:46

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

Ron Royston · Accepted Answer · 2016-06-16 05:39:27

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>

Z. Rahman Raju · Accepted Answer · 2016-06-16 04:44:02

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

Neko · Accepted Answer · 2016-10-26 17:47:04

так просто, используйте только поля и левые, правые свойства:
.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}
вы можете увидеть больше в этой подсказке =>Как установить div элемент в центр в html-Obinb blog

Amit Kumar · Accepted Answer · 2018-07-31 21:39:17

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

Leonard Pauli · Accepted Answer · 2013-07-31 20:39:46

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

}