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

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

最佳答案

为此，您需要知道居中元素的大小。可以进行任何测量(即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在浏览器窗口中居中。但这还是足够好，因为您可能想显示一个弹出框/模式框？