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

Question

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

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

Answer 1

我没有理解你的意思但是这会使文档从顶部和左侧移动50%所以你应该定位div而不是容器元素.

演示

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

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

现在,这是一个固定的解决方案width元素,如果你的元素width和height是可变的,你将有你的容器元素设置为display: table-cell;比使用vertical-align: middle;对齐元素垂直居中,而margin: auto;将采取横向居中对齐的照顾.

演示

注:我使用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;

}