DIV CSS 佈局教程網

垂直居中是布局中十分常見的效果之一，這篇文章主要介紹了純CSS實現垂直居中的9種方法，感興趣的小伙伴們可以參考一下

為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了CSS3，針對移動端的垂直居中就更加多樣化。

方法1：table-cell

Html結構：

XML/Html Code復制內容到剪貼板

1. <div class="box box1">
2. <span>垂直居中</span>
3. </div>

CSS：

CSS Code復制內容到剪貼板

1. .box1{
2. display: table-cell;
3. vertical-align: middle;
4. text-align: center;
5. }

方法2：display:flex

CSS Code復制內容到剪貼板

1. .box2{
2. display: flex;
3. justify-content:center;
4. align-items:Center;
5. }

方法3：絕對定位和負邊距

CSS Code復制內容到剪貼板

1. .box3{position:relative;}
2. .box3 span{
3. position: absolute;
4. width:100px;
5. height: 50px;
6. top:50%;
7. left:50%;
8. margin-left:-50px;
9. margin-top:-25px;
10. text-align: center;
11. }

方法4：絕對定位和0

CSS Code復制內容到剪貼板

1. .box4 span{
2. width: 50%;
3. height: 50%;
4. background: #000;
5. overflow: auto;
6. margin: auto;
7. position: absolute;
8. top: 0; left: 0; bottombottom: 0; rightright: 0;
9. }

這種方法跟上面的有些類似，但是這裡是通過margin:auto和top,left,right,bottom都設置為0實現居中，很神奇吧。不過這裡得確定內部元素的高度，可以用百分比，比較適合移動端。

方法5：translate

CSS Code復制內容到剪貼板

1. .box6 span{
2. position: absolute;
3. top:50%;
4. left:50%;
5. width:100%;
6. transform:translate(-50%,-50%);
7. text-align: center;
8. }

這實際上是方法3的變形，移位是通過translate來實現的。

方法6：display:inline-block

CSS Code復制內容到剪貼板

1. .box7{
2. text-align:center;
3. font-size:0;
4. }
5. .box7 span{
6. vertical-align:middle;
7. display:inline-block;
8. font-size:16px;
9. }
10. .box7:after{
11. content:'';
12. width:0;
13. height:100%;
14. display:inline-block;
15. vertical-align:middle;
16. }

這種方法確實巧妙...通過:after來占位。

方法7：display:flex和margin:auto

CSS Code復制內容到剪貼板

1. .box8{
2. display: flex;
3. text-align: center;
4. }
5. .box8 span{margin: auto;}

方法8：display:-webkit-box

CSS Code復制內容到剪貼板

1. .box9{
2. display: -webkit-box;
3. -webkit-box-pack:center;
4. -webkit-box-align:center;
5. -webkit-box-orIEnt: vertical;
6. text-align: center
7. }

CSS3博大精深，可以實現很多創造性的效果，需要好好研究下。

今天又發現一種方法，現在補上：

方法9：display:-webkit-box

這種方法，在 content 元素外插入一個 div。設置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動，並顯示在中間。

XML/Html Code復制內容到剪貼板

1. <div class="floater"></div>
2. <div class="content"> Content here </div>

CSS Code復制內容到剪貼板

1. .floater {
2. float:left;
3. height:50%;
4. margin-bottom:-120px;
5. }
6. .content {
7. clear:both;
8. height:240px;
9. position:relative;
10. }

優點：
適用於所有浏覽器
沒有足夠空間時(例如：窗口縮小) content 不會被截斷，滾動條出現

缺點：
唯一我能想到的就是需要額外的空元素了(也沒那麼糟，又是另外一個話題)

以上就是本文的全部內容，希望對大家的學習有所幫助。