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

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>


当前回答

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

#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

其他回答

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

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

}

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

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

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

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

要居中一个位置:绝对属性,你需要设置left:50%和margin-left: -50%的div宽度。

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

对于垂直中心绝对,你需要做同样的事情,而不是用左边,只是用顶部。 (注意:html和body必须有min-height 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

并且可以两者结合使用

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

html, body, ul, li, img { box-sizing: border-box; margin: 0px; padding: 0px; } #slideshowWrapper { width: 25rem; height: auto; position: relative; margin-top: 50px; border: 3px solid black; } ul { list-style: none; border: 3px solid blue; } li { /* center horizontal */ position: relative; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px; /* center horizontal */ border: 3px solid red; } img { border: 1px solid #ccc; padding: 4px; //width: 200px; height: 100px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li> <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li> <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li> </ul> </div> </body>

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

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