我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
在不知道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. 具有非静态位置的元素。即相对的，绝对的，固定的值。
我不确定你想要完成什么，但在这种情况下，只是增加宽度:100%;到你的ul#slideshow li将做的把戏。
解释
The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.
