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

当前回答

如果你不知道元素的宽度，你可以使用下面的代码:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

演示在小提琴:http://jsfiddle.net/wrh7a21r/

来源:https://stackoverflow.com/a/1777282/1136132

2014-12-30 18:32:01

其他回答

如果你设置了宽度，你可以使用:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

2013-08-28 11:17:46

下面是使用“position: absolute”的中心元素的简单且最佳的解决方案

身体,html { 最小高度:100%; ｝ div.center { 宽度:200 px; 左:50%; Margin-left:-100px;/*这是元素宽度的50% 位置:绝对的; 背景:# ddd; 边框:1px实体#999; 身高:100 px; text-align:中心｝ <时尚> > < /风格身体< > < div class = >“中心” 应该垂直居中 < / div > 身体< / >

2017-03-29 09:32:20

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

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

2021-09-04 01:08:18

我最喜欢的绝对居中任何元素或元素组的方法是对它们的容器进行绝对定位，使其成为相对容器的高度和宽度，然后使用flex来对齐其中的元素。

在这种情况下:

body {
  position: relative; /* OPTIONAL */
}

#slideshowWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* OPTIONAL IF ONLY ONE ELEMENT */
  justify-content: center;
  align-items: center;
}

希望有帮助，干杯。

2021-05-25 16:30:59

一个简单的CSS技巧，只需添加:

width: 100%;
text-align: center;

这对图像和文本都有效。

2012-10-29 15:49:38

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

推荐文章

最新文章

标签