html 绝对位置居中,如何在div中对绝对定位元素进行居中？

响应解

这里有一个很好的解决方案用于响应性设计或未知尺寸总体而言如果你不需要支持IE8和更低的。.centered-axis-x {

position: absolute;

left: 50%;

transform: translate(-50%, 0);}

.outer {

position: relative; /* or absolute */

/* unnecessary styling properties */

margin: 5%;

width: 80%;

height: 500px;

border: 1px solid red;

}

.inner {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

/* unnecessary styling properties */

max-width: 50%;

text-align: center;

border: 1px solid blue;

}

I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

线索是，left: 50%是相对于父级的，而translate转换相对于元素的宽度/高度。

这样，您就有了一个完美的居中元素，子元素和父元素都具有灵活的宽度。奖励：即使孩子比父母大，这也是可行的。

您也可以用它垂直对中(同样，父级和子级的宽度和高度可以完全灵活(和/或未知)：.centered-axis-xy {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);}

记住你可能需要transform供应商的前缀也是。例如-webkit-transform: translate(-50%,-50%);