CSS實現水平垂直居中的常用方法
在前端開發過程中，水平居中、垂直居中、水平垂直居中都很常見。本章來看看水平垂直居如何實現。
Ｄemo：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果：
水平居中
直接設置元素的margin: 0 auto即可。
垂直居中
垂直居中比較復雜一些。我們要明確我們的元素是要在屏幕居中，還是要在所在塊元素（如div）中居中。我們要用到position定位。position默認是static的，除此之外，absolute、relative、fixed。垂直居中需要通過position定位來完成。
水平居中之所以只需要設置margin:0 auto就可以完成的主要原因是body的水平width是可知的。但是body的height默認是0，隨內容自適應變化高度。即使設置height的值，也不會有效。因為它還是有很多情況無法確定。因此無法像水平居中那么容易設置居中。所以垂直居中只好參考包含塊的左邊、上邊這些確定的地方做定位來實現居中。我們討論position的absolute、relative、fixed三個不同的值來如何實現居中。
（１）fixed固定定位
使用fixed定位的塊，它的參考對象是窗口（瀏覽器窗口）且只針對瀏覽器窗口的上下左右定位，不會隨著窗口大小改變其位置（如果要讓其改變可以將它的定位值，設成百分比形式），它的位置是固定不變的。常用于固定位置的小廣告，常用于網站邊緣的公司聯系方式和快速回到頂部。
第一種方式：
.content { width: 100px; height: 100px; background: orange; position: fixed; top: 50%; margin-top: -50px; }
1
2
3
4
5
6
7
8
如果不加margin-top: -50px，那么div的中心到窗口的垂直中心的距離是div自身高度的一半。所以div向上偏移div的高度的一半就可以了。因為div高度為100px,所以設置margin-top: -50px就可實現了。margin-top的值：正數是向下偏移，負數是向上偏移。
在CSS3的transform屬性也可以實現向上偏移，通過設置div的transform: translateY(-50%)，就可以使得div向上平移（translate）自身高度的一半(50%)，如下面所示。
第二種方式：
.content { width: 100px; height: 100px; background: orange; position: fixed; top: 50%; transform: translateY(-50%); }
1
2
3
4
5
6
7
8
效果如下：
水平垂直居中的樣式：
.content { width: 100px; height: 100px; background: orange; position:fixed; top:50%; left:50%; margin-top:-50px; margin-left:-50px; }
1
2
3
4
5
6
7
8
9
10
或者：
.content { width: 100px; height: 100px; background: orange; position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); }
1
2
3
4
5
6
7
8
9
效果：
absolute、relative的垂直居中
我們用一個新例子來做演示：
div one
content
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
28
29
30
31
32
33
34
效果
（1）absolute絕對定位
absolute絕對定位，不占據位置，會隨著窗口大小與頁面一起改變，脫離文檔流意味著元素可以堆疊。position為absolute的元素或塊的定位是參考離它最近的position為fixed或relative或absolute的父元素。如果找不到這樣的父元素那它就會參考瀏覽器窗口定位（不是body元素哦?。?。
水平垂直居中：
// 父元素的樣式 .content_outer{ width: 500px; height: 500px; background-color: red; position:absolute;// 父元素的這個值可以是fixed、relative、absolute } // 需要居中的元素 .content { width: 100px; height: 100px; background: orange; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
或者
// 父元素的樣式 .content_outer{ width: 500px; height: 500px; background-color: red; position:absolute;// 父元素的這個值可以是fixed、relative、absolute } // 需要居中的元素 .content { width: 100px; height: 100px; background: orange; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
效果
（2）relative相對定位
采取相對定位的元素，將相對于它原來的位置（即沒有進行相對定位前），設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
水平垂直居中：
.content { width: 100px; height: 100px; background: orange; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }
1
2
3
4
5
6
7
8
9
效果
謝謝閱讀
CSS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
