如何居中 “位置：绝对” 元素

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>

如果设置了宽度，则可以使用：

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

在不知道所定位的^{1 个}width / height下，仍然可以按以下方式对其进行对齐：

这里的例子

.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%) */
}

值得注意的是 IE9 及更高版本支持 CSS Transform 。 （为简洁起见，省略了供应商前缀）

解释

将top / left增加50%会将元素的顶部 / 左边距边缘移动到父级的中间，并且（负）值为-50% translate()函数会将元素的大小减小一半。因此，该元素将位于中间。

top / left属性上的百分比值是相对于父元素（正在创建包含块）的高度 / 宽度的。

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

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

^{1. 具有除static position的元素。即relative ， absolute ， fixed值。}

在 CSS 中，将absolute放置的内容居中是相当复杂的。

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

}

将margin-left更改为（正）您要居中的元素的宽度的一半。

协慌网

如何居中 “位置：绝对” 元素

答案

解释