css - 窗口中 div 的垂直+水平居中最简单的方法是什么？

Question

给定一个已知尺寸的div，比如width: 300px; height: 200px，将它垂直和水平放置在屏幕中间最简单的方法是什么？ Example here

我对最新的 Firefox 感兴趣(不需要 IE hack)。

请仅使用 CSS，不要使用 Javascript。

Answer 1

将其放置在距离窗口/父容器 50% 的位置，并使用一个负边距大小，即元素宽度/高度的一半:)

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

您可能需要在 body 和 html 上设置 height: 100%

html, body {
    height: 100%;
}

编辑:这是一个有效的 example .