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

当前回答

使用左:calc(50% - Wpx/2);其中W是元素的宽度。

2017-01-09 06:59:02

其他回答

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

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

}

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

2011-12-14 16:52:50

我最喜欢的绝对居中任何元素或元素组的方法是对它们的容器进行绝对定位，使其成为相对容器的高度和宽度，然后使用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

Div垂直和水平对齐中心

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

注意:元素应该设置宽度和高度

2014-01-28 10:22:41

你可以试试这种方法:

* { margin: 0px; padding: 0px; } #body { height: 100vh; width: 100vw; position: relative; text-align: center; background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); background-size: cover; background-repeat: no-repeat; } .text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; display: inline-block; margin: auto; z-index: 999999; } <html> <body> <div id="body" class="container-fluid">   <div class="text"> <p>Random</p> </div> </div> </body> </html>

2018-01-05 11:29:07

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

推荐文章

最新文章

标签