Question

我有一个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;
}

Answer 1

您需要设置left: 0和right: 0。

指定从窗口两侧偏移边距的距离。

与'top'类似，但指定框的右边距边缘偏移到框的包含块的[右/左]边缘的[左/右]。

<强>来源： http://www.w3.org/TR/CSS2/visuren.html#position-props

注意：该元素的宽度小于，否则它将占据窗口的整个宽度。

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

Answer 2

这在IE8中不起作用，但可能是一个需要考虑的选项。如果您不想指定宽度，它主要是有用的。

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

Answer 3

虽然上面的答案是正确的但是为了让新手很简单，你需要做的就是设置左右边距。如果设置宽度并且位置是绝对的，则以下代码将执行此操作：

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

<强>演示：

＆＃13;

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

＆＃13;

<div class="centeredBox">Centered Box</div>

＆＃13;

Answer 4

Flexbox的？你可以使用flexbox。

＆＃13;

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

＆＃13;

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

＆＃13;

Answer 5

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

Answer 6

这么简单，只使用保证金和左右属性：

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

您可以在此提示中查看更多内容=＆gt; How to set div element to center in html- Obinb blog

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

Example jsfiddle

Answer 8

使用位置：绝对和宽度：未知的居中div：

HTML：

<div class="center">
  <span></span>

  <div>
    content...
  </div>

</div>

CSS：

.center{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto auto;
  overflow: auto;
}

Answer 9

您无法在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;
    }

}

如何使用CSS水平居中绝对div？

9 个答案: