如何以“位置：绝对”元素为中心
我在将属性position设置为absolute的元素居中时遇到问题。 有谁知道为什么图像不居中？
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
在不知道定位1元素的width / height的情况下，仍然可以如下对齐它：
在这里举例
.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%) */
}
值得注意的是，IE9及以上版本支持CSS转换。 （供应商前缀为简洁起见省略）
说明
加入top / left的50%移动元件到父的中间的顶部/左边距边缘，和translate()函数的（负）值-50%通过它的大小的一半移动元件。 因此元素将被放置在中间。
这是因为top / left属性的百分比值是相对于父元素的高度/宽度（这是创建一个包含块）。
虽然translate()转换函数的百分比值与元素本身的宽度/高度有关（实际上它指的是边界框的大小）。
对于单向对齐，请使用translateX(-50%)或translateY(-50%) 。
1.具有非static position的元素。 即relative ， absolute ， fixed值。
将absolute定位的东西置于CSS中相当复杂。
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
将margin-left更改为（负）您试图居中的元素宽度的一半。