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

当前回答

只需在父元素上使用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

其他回答

要居中一个位置:绝对属性，你需要设置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>

2011-12-14 17:02:02

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

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

}

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

2011-12-14 16:52:50

    <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

越简单越好:

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>

2014-02-14 15:32:47

在不知道positioned1元素的宽/高的情况下，仍然可以按如下方式对齐它:

例子

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

值得注意的是，CSS Transform在IE9及以上版本中是受支持的。(为简洁起见，省略了供应商前缀)

解释

添加top/left为50%将元素的上/左边距移动到父元素的中间，(负)值为-50%的translate()函数将元素移动其大小的一半。因此，元素将被定位在中间。

这是因为顶部/左侧属性上的百分比值是相对于父元素的高度/宽度的(它正在创建一个包含块)。

而translate()转换函数上的百分比值是相对于元素本身的宽度/高度(实际上它指的是包围框的大小)。

对于单向对齐，使用translateX(-50%)或translateX(-50%)。

1. 具有非静态位置的元素。即相对的，绝对的，固定的值。

2014-09-10 22:48:13

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

推荐文章

最新文章

标签