206

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

9 回答 9

456

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

这指定了从窗口边缘偏移边缘边缘的距离。

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

来源： 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>

于 2013-07-31T17:44:09.753 回答
143

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

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
于 2014-11-19T19:42:42.987 回答
17

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

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

如果您不想使用单位设置值，也可以使用其他宽度值，例如max-content等fit-content

演示：

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

于 2016-02-05T07:14:03.787 回答
5 
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
于 2016-06-16T01:44:02.723 回答
5

弹性盒？您可以使用弹性盒。

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

于 2016-06-16T02:39:27.727 回答
2

如此简单，只使用边距和左右属性：

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

您可以在此提示中看到更多内容 =>如何在 html-Obinb 博客中将 div 元素设置为居中

于 2016-10-26T14:47:04.327 回答
0

垂直居中和水平居中都使用left:50%;top:50%; transform: translate(-50%, -50%);

.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);
   
   }
<div class="centeredBox">Centered Box</div>

于 2021-08-17T09:55:18.017 回答
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

于 2018-07-31T16:52:56.260 回答
-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;
    }

}
于 2013-07-31T17:33:27.043 回答