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

我有一个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; 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或此答案不起作用 。 这意味着这个答案对dynamic宽度的元素没有用处。

Answer 2

这不适用于IE8，但可能是一个select考虑。 如果你不想指定宽度，这是主要的用处。

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

Answer 3

虽然上面的答案是正确的，但为了使新手简单，所有你需要做的是设置保证金，左和右。 下面的代码将提供宽度设置和位置是绝对的：

 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> 

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

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

你可以在这个提示中看到更多=> 如何将div元素设置为以html-Obinb博客为中心

Answer 7

你不能使用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; } }