Question

我有一个position:absolute的div，我需要将它放在文档的中心。我认为可行的方法是使用left:50%; top:50%，但这会使div从顶部向左移动50％，因此它的右侧和底部比我想要的更多。有没有办法使用它的中心作为焦点来移动div？

高度和宽度都必须是300px，div必须始终位于文档的中心，无论分辨率如何 - 这就是为什么我不能使用静态值并且必须使用百分比

Answer 1

我不理解的含义，但这会将文档从顶部和左侧移动50％，因此您应该定位div而不是容器元素。

Demo

div {
    height: 100px;
    width: 100px;
    background: tomato;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

上面是使用您正在使用的所有属性，但除此之外我使用margin-left和margin-top的负值相当于元素height的1/2并且width

现在这是固定width元素的解决方案，如果您的元素width和height是可变的，则必须将容器元素设置为display: table-cell;而不是使用vertical-align: middle;将元素对齐到垂直居中，而margin: auto;将处理水平居中对齐。

Demo

注意：对于display: table;使用body这是一种肮脏的方式，所以请考虑使用包装元素，然后将display: table-cell;分配给它，同时确保您已看到所有父元素height到100%

Answer 2

为什么不尝试这个，它比乱码像素更简单，更通用：

.div {
position:absolute;
border:1px solid black;
width:100px;
height:100px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;

}

Answer 3

基于Mr.Alien的小提琴，我建议您使用calc进行固定尺寸宽度的精确中间对齐

想法是使用calc(50% - 150px);，即（50％ - 块的一半维度）

通过这种方式，您可以避免以下行为：

margin-left: -xxpx;
margin-top: -xxpx;

<强> CSS

div {
    height: 300px;
    width: 300px;
    background: tomato;
    position: absolute;
    top: calc(50% - 150px);
    top: -moz-calc(50% - 150px);
    top: -webkit-calc(50% - 150px);
    left: calc(50% - 150px);
    left: -moz-calc(50% - 150px);
    left: -webkit-calc(50% - 150px);
}

working fiddle

Answer 4

user2211216得到了我想要的东西 - 只需使用

margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;

使用左，右和绝对定位对中心进行居中

4 个答案: