代码：
|
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设置为负的宽度的一半，就可以居中了。