div 居中

韓夢飛沙_韓亞飛發表於2019-02-12

程式碼：

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設定為負的寬度的一半，就可以居中了。

相關文章