我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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>
1-当你知道绝对定位元素的宽度。
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px
2-当你不知道绝对定位元素的宽度时。响应性很好，但CSS3旧浏览器可能有问题。
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
3-当你不知道绝对定位元素的宽度，但使它的父元素100%宽，这可能不符合设计。
position: absolute;
left: 0;
right: 0;
margin: auto
如果你知道宽度，你也可以使用第三个选项，它将居中。
要居中一个位置:绝对属性，你需要设置left:50%和margin-left: -50%的div宽度。
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
对于垂直中心绝对，你需要做同样的事情，而不是用左边，只是用顶部。
(注意:html和body必须有min-height 100%;)
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
并且可以两者结合使用
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
