CSS垂直居中的11種實現方式

時間  2019-12-20
標籤 css 垂直 居中 實現 方式 欄目 CSS 简体版
原文   原文鏈接
  1. 使用絕對定位和負外邊距對塊級元素進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 150px;
19             height: 100px;
20             background: orange;
21             position: absolute;
22             top: 50%;
23             margin: -50px 0 0 0;
24             line-height: 100px;
25         }
26     </style>
27 
28     <body>
29 
30         <div id="box">
31             <div id="child">我是測試DIV</div>
32         </div>
33 
34     </body>
35 
36 </html>
    • 效果：
    • 注意：這個方法兼容性不錯，可是有一個小缺點：必須提早知道被居中塊級元素的尺寸，不然沒法準確實現垂直居中。
  2. 使用絕對定位和transform
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             background: #93BC49;
19             position: absolute;
20             top: 50%;
21             transform: translate(0, -50%);
22         }
23     </style>
24 
25     <body>
26 
27         <div id="child">
28             我是一串很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本
29         </div>
30 
31     </body>
32 
33 </html>
    • 效果：
    • 注意：這種方法有一個很是明顯的好處就是沒必要提早知道被居中元素的尺寸了，由於transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
  3. 另一種使用絕對定位和負外邊距進行垂直居中的方式
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 50%;
19             height: 30%;
20             background: pink;
21             position: absolute;
22             top: 50%;
23             margin: -15% 0 0 0;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">我也是個測試DIV</div>
31         </div>
32 
33     </body>
34 
35 </html>
    • 效果：
    • 注意：這種方式的原理實質上和前兩種相同。補充的一點是：margin的取值也能夠是百分比，這時這個值規定了該元素基於父元素尺寸的百分比，能夠根據實際的使用場景來決定是用具體的數值仍是用百分比。
  4. 絕對定位結合margin: auto
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 200px;
19             height: 100px;
20             background: #A1CCFE;
21             position: absolute;
22             top: 0;
23             bottom: 0;
24             margin: auto;
25             line-height: 100px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="child">呆呆今天退役了(。﹏。)</div>
33         </div>
34 
35     </body>
36 
37 </html>
    • 效果：
    • 注意：
      　　這種實現方式的兩個核心是：把要垂直居中的元素相對於父元素絕對定位，top和bottom設爲相等的值，我這裏設成了0，固然你也能夠設爲99999px或者-99999px不管什麼，只要二者相等就行，這一步作完以後再將要居中元素的margin設爲auto，這樣即可以實現垂直居中了。
      　　被居中元素的寬高也能夠不設置，但不設置的話就必須是圖片這種自身就包含尺寸的元素，不然沒法實現。
  5. 使用padding實現子元素的垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             background: #ddd;
13             padding: 100px 0;
14         }
15         
16         #child {
17             width: 200px;
18             height: 100px;
19             background: #F7A750;
20             line-height: 50px;
21         }
22     </style>
23 
24     <body>
25 
26         <div id="box">
27             <div id="child">今天西安的霾嚴重的嚇人，剛看了一眼PM2.5是422</div>
28         </div>
29 
30     </body>
31 
32 </html>
    • 效果：
    • 注意：
      　　這種實現方式很是簡單，就是給父元素設置相等的上下內邊距，則子元素天然是垂直居中的，固然這時候父元素是不能設置高度的，要讓它自動被填充起來，除非設置了一個正好等於上內邊距+子元素高度+下內邊距的值，不然沒法精確的垂直居中。
      　　這種方式看似沒有什麼技術含量，但其實在某些場景下也是很是好用的。
  6. 設置第三方基準
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14         }
15         
16         #base {
17             height: 50%;
18             background: #AF9BD3;
19         }
20         
21         #child {
22             height: 100px;
23             background: rgba(131, 224, 245, 0.6);
24             line-height: 50px;
25             margin-top: -50px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="base"></div>
33             <div id="child">今天寫了第一篇博客，但願能夠堅持寫下去！</div>
34         </div>
35 
36     </body>
37 
38 </html>
    • 效果：
    • 注意：這種方式也很是簡單，首先設置一個高度等於父元素高度一半的第三方基準元素，那麼此時該基準元素的底邊線天然就是父元素縱向上的中分線，作完這些以後再給要垂直居中的元素設置一個margin-top，值的大小是它自身高度的一半取負，則實現垂直居中。
  7. 使用flex佈局
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             align-items: center;
16         }
17     </style>
18 
19     <body>
20 
21         <div id="box">霧霾天氣，過久沒有打球了</div>
22 
23     </body>
24 
25 </html>
    • 效果：
  8. 第二種使用彈性佈局的方式
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             flex-direction: column;
16             justify-content: center;
17         }
18         
19         #child {
20             width: 300px;
21             height: 100px;
22             background: #08BC67;
23             line-height: 100px;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">
31                 答案固然是多用綠色的背景哈哈
32             </div>
33         </div>
34 
35     </body>
36 
37 </html>
    • 效果：
  9. 還有一種在前面已經見到過不少次的方式就是使用 line-height 對單行文本進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16     </style>
17 
18     <body>
19 
20         <div id="box">
21             我是一段測試文本
22         </div>
23     </body>
24 
25 </html>
    • 效果：
    • 注意：這裏有一個小坑須要你們注意：line-height(行高) 的值不能設爲100%，咱們來看看官方文檔中給出的關於line-height取值爲百分比時候的描述：基於當前字體尺寸的百分比行間距。因此你們就明白了，這裏的百分比並非相對於父元素尺寸而言，而是相對於字體尺寸來說的。
  10. 使用 line-height 和 vertical-align 對圖片進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16         
17         #box img {
18             vertical-align: middle;
19         }
20     </style>
21 
22     <body>
23 
24         <div id="box">
25             <img src="duncan.jpeg">
26         </div>
27     </body>
28 
29 </html>
    • 效果：
  11. 使用 display 和 vertical-align 對容器裏的文字進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: table;
15         }
16         
17         #child {
18             display: table-cell;
19             vertical-align: middle;
20         }
21     </style>
22 
23     <body>
24 
25         <div id="box">
26             <div id="child">我也是一段測試文本</div>
27         </div>
28     </body>
29 
30 </html>
    • 效果：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程