我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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>
如果你想让一个绝对元素居中
#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
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
我不记得我在哪里看到了上面列出的居中方法，使用负的上、右、下、左值。
对我来说，在大多数情况下，这个技巧是最好的。
当我使用上面的组合时，图像的行为就像一个背景图像，具有以下设置:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
关于第一个例子的更多细节可以在这里找到:
使用CSS维护div的纵横比
要居中一个位置:绝对属性，你需要设置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>
