css - 如何在不使用 javascript 的情况下居中和垂直对齐 div 元素

Question

我试图居中，只使用css，一个垂直和水平的div元素。

我见过的所有示例都使用了硬编码值，例如像素值。

是否可以在不使用 javascript 且仅使用百分比值的情况下将 div 元素居中？

这是我的测试：jsfiddle.net

score 2 · Accepted Answer

您需要知道 div 的大小。（是的，div 的大小必须是固定的）。

div { 
    width: 50px; 
    height: 50px; 
}

他的 div 必须有绝对位置：

div { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
}

之后，必须将顶部和左侧包围在 50% 处；

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
}

最后，您必须为顶部和左侧添加一个负边距，指的是 div 的高度和宽度值的一半。

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
    margin:-25px 0 0 -25px; 
}

请测试。
任何问题让我知道。

score 1 · Accepted Answer

这实际上可以通过使用:before选择器来完成（有问题的浏览器兼容性，但可以做到）。

查看Chris Coyier 撰写的这篇关于该主题的精彩文章以了解所有相关信息，他还为您提供了一个 jsfiddle 链接以供您试用。

2 回答 2