无论屏幕大小如何,都将DIV居中到页面中心

Question

无论屏幕大小如何,我都希望将下面的div容器置于页面中心显示的位置.

http://penarthpc.com/~droneboy/

我玩了一会儿,但似乎错过了一些东西.

Answer 1

这个问题的解决方案是在CSS中使用autofor margin并为DIV本身提供一些宽度:

div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}

Answer 2

无论页面宽度如何，最简单的居中方法是margin: auto;在 CSS 中定义高度和宽度。

.class {
    height: 50px;
    width: 50px;
    margin: auto;
}

JSFiddle： http: //jsfiddle.net/rVXBH/

Answer 3

.center-div {
   width: 600px;
   height: 600px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -300px;
   margin-top: -300px;
}

这将使您的 DIV 与类center-div水平和垂直居中。必须margin-left是宽度的负一半。必须margin-top是高度的负一半。

水平居中：

.center-div {
   width: 600px;
   height: 600px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}