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

当前回答

你可以使用"transform"属性:

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

2021-07-11 12:15:03

其他回答

将“position: absolute”元素居中。

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

2018-04-08 23:35:26

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

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

}

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

2011-12-14 16:52:50

或者你现在可以使用flex box与位置绝对:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

2019-11-14 14:17:14

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

2013-07-11 06:43:42

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

如何将“position: absolute”元素居中

推荐文章

最新文章

标签