如果你想让一个绝对元素居中

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果你想让一个容器从左到右居中，而不是从上到下

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果你想让一个容器从上到下居中，不管从左到右

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

更新截止2015年12月15日

好吧，几个月前我又学了一个新把戏。假设您有一个相对的父元素。

这就是你的绝对元素。

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

有了这个，我认为这是一个比我以前的解决方案更好的答案。因为你不需要指定宽度和高度。这个调整了元素本身的内容。

更新截止2021年4月23日

它不能回答OP关于绝对位置的问题，但如果你想要替代解决方案，有一个叫做flexbox的方法。举个例子。

#parent {
    display:flex;
    align-items:center;
    justify-content:center;
}

它所做的是将容器转换为flex并将子项对齐到水平的居中通过使用justify-content:center而垂直的则使用align-items:center。它也支持现代浏览器，所以使用起来很安全。

不过，一定要先阅读flexbox的工作原理。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

支持Flexbox的浏览器

https://caniuse.com/flexbox

这招对我很管用:

position: absolute;
left: 50%;
transform: translateX(-50%);

使用margin-left: x%;其中x是元素宽度的一半。

目前似乎有两种解决方案;边距居中，位置居中。这两种工作都很好，但是如果您想要相对于这个居中元素的绝对位置，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

直到我读到这篇文章，使用边距:0自动技术，在我的内容的左边建立一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢!

Div垂直和水平对齐中心

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

注意:元素应该设置宽度和高度

在CSS中，居中一些绝对定位的东西是相当复杂的。

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

将左边距更改为要居中的元素宽度的一半(负)。