我有一个问题,居中有一个元素的属性位置设置为绝对。 有人知道为什么这些图像没有居中吗?

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>


当前回答

越简单越好:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

然后你需要将你的img标签插入到一个运动位置:相对属性的标签中,如下所示:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

其他回答

相对对象中的绝对对象是相对于它的父对象的,这里的问题是你需要一个静态宽度容器#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/

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

我不记得我在哪里看到了上面列出的居中方法,使用负的上、右、下、左值。 对我来说,在大多数情况下,这个技巧是最好的。

当我使用上面的组合时,图像的行为就像一个背景图像,具有以下设置:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

关于第一个例子的更多细节可以在这里找到: 使用CSS维护div的纵横比

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

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

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

如果你想让一个绝对元素居中

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果你想让一个容器从左到右居中,而不是从上到下

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果你想让一个容器从上到下居中,不管从左到右

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

更新截止2015年12月15日

好吧,几个月前我又学了一个新把戏。假设您有一个相对的父元素。

这就是你的绝对元素。

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

有了这个,我认为这是一个比我以前的解决方案更好的答案。因为你不需要指定宽度和高度。这个调整了元素本身的内容。

更新截止2021年4月23日

它不能回答OP关于绝对位置的问题,但如果你想要替代解决方案,有一个叫做flexbox的方法。举个例子。

#parent {
    display:flex;
    align-items:center;
    justify-content:center;
}

它所做的是将容器转换为flex并将子项对齐到水平的居中通过使用justify-content:center而垂直的则使用align-items:center。它也支持现代浏览器,所以使用起来很安全。

不过,一定要先阅读flexbox的工作原理。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

支持Flexbox的浏览器

https://caniuse.com/flexbox

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

希望有帮助,干杯。