div 居中

代码：

1 2 3 4

<div class="mask"> 　　<div class="content"><br>　　　　我是要居中的板块 　　</div> </div>

　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.mask{ 　　display: block; 　　position: fixed; 　　top: 0; 　　left: 0; 　　width: 100%; 　　height: 100%; 　　background: #000; 　　filter: alpha(opacity=30); 　　-ms-filter: "alpha(opacity=30)"; 　　opacity: .3; 　　z-index: 10000; } .center{     display: block;     position: fixed;     _position: absolute;     top: 50%;     left: 50%;     width: 666px;     height:400px;     margin-left: -333px;     margin-top: -200px;     z-index: 10001;     box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;     background-color: #fff; }

效果：

 

 

这种居中方式，把内部div设置宽高之后，再设置top、left各为50%，设置完之后，这里是按照左端居中的，接着我们使用负边距的方式调整，将margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半，就可以居中了。