Div垂直和水平对齐中心

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

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

越简单越好:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

然后你需要将你的img标签插入到一个运动位置:相对属性的标签中，如下所示:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

如果你设置了宽度，你可以使用:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

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

#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

在不知道positioned1元素的宽/高的情况下，仍然可以按如下方式对齐它:

例子

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

值得注意的是，CSS Transform在IE9及以上版本中是受支持的。(为简洁起见，省略了供应商前缀)

解释

添加top/left为50%将元素的上/左边距移动到父元素的中间，(负)值为-50%的translate()函数将元素移动其大小的一半。因此，元素将被定位在中间。

这是因为顶部/左侧属性上的百分比值是相对于父元素的高度/宽度的(它正在创建一个包含块)。

而translate()转换函数上的百分比值是相对于元素本身的宽度/高度(实际上它指的是包围框的大小)。

对于单向对齐，使用translateX(-50%)或translateX(-50%)。

1. 具有非静态位置的元素。即相对的，绝对的，固定的值。

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

参见demo: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align:中心;工作与位置:绝对元素时添加左:0;右:0;