html - 如何将元素居中放置在浏览器窗口的中间？

Question

如何将一些 HTML 元素(例如 <div>)放在浏览器窗口(不是页面，不是屏幕)的中间？不依赖于浏览器窗口大小、屏幕分辨率、工具栏布局等。我希望它位于浏览器窗口的中间。

Answer 1

为此，您需要知道要居中的元素的大小。任何测量都可以(即 px、em、百分比)，但它必须具有固定大小。

CSS 将如下所示:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

编辑:这在视口(viewport)中居中。您只能使用 JavaScript 在浏览器窗口中居中。但这可能已经足够好了，因为您可能想要显示一个弹出框/模式框？