如何将“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="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

如果你知道宽度，你也可以使用第三个选项，它将居中。

2021-04-16 08:00:25

其他回答

使用margin-left: x%;其中x是元素宽度的一半。

2013-07-11 06:43:42

在CSS中，居中一些绝对定位的东西是相当复杂的。

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

将左边距更改为要居中的元素宽度的一半(负)。

2011-12-14 16:52:50

相对对象中的绝对对象是相对于它的父对象的，这里的问题是你需要一个静态宽度容器#slideshowWrapper，其余的解决方案就像其他用户说的

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

2011-12-14 17:06:57

绝对位置将其从流中取出，并将其放在父元素的0x0处(最后一个块元素具有绝对位置或相对位置)。

我不确定你到底想要完成什么，它可能是最好的设置li到一个位置:相对，这将居中他们。考虑到当前的CSS

请登录http://jsfiddle.net/rtgibbons/ejRTU/玩它

2011-12-14 16:59:55