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

当前回答

对于这种情况，我认为下面的代码就足够了:

    ul#slideshow li {
      position: absolute;
      left: 0;
      right: 0;
    }

2021-09-04 01:08:18

其他回答

只需在父元素上使用display: flex和justify-content: center即可

body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; display: flex; justify-content: center; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 100px; } <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>

您可以在JSFIDDLE中找到这个解决方案

2020-08-26 17:11:41

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

参见demo: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align:中心;工作与位置:绝对元素时添加左:0;右:0;

2014-05-24 01:49:11

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

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

}

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

2011-12-14 16:52:50

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

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

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

2011-12-14 16:59:55

你可以使用"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”元素居中

推荐文章

最新文章

标签