css 垂直水平居中總結

時間 2019-11-15

標籤 css 垂直水平居中總結欄目 CSS 简体版

原文原文鏈接

1、前言：

垂直居中有不少方式，咱們要作的不是寫出完美代碼，而是在合適的狀況下根據需求選擇合適方式。css

主要方式：html

line-height
絕對定位
表格 display：table-cell

主要需求：css3

固定寬高
不固定寬高

主要兼容：瀏覽器

ie8+ 主流瀏覽器
ie6,7

2、行高

1. 利用行高與高度相同，實現單行文本居中ide

缺點：只能是單行文本spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6     .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;}
 7     </style>
 8 </head>
 9 <body>
10 <div class="d1">
11     fdsfdsfdsfdfsfds
12 </div>
13 </body>
14 </html>

View Code

效果預覽.net

2.利用inline-block改進（推薦）code

改變display屬性，就能夠是塊元素了，vertical-align: middle;設置垂直屬性orm

優勢：自適應內容htm

兼容：>=ie8 + 主流

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         text-align: center;
11         line-height: 500px;
12     }
13     .div2{
14         display: inline-block;
15         vertical-align: middle;
16         width: 200px;
17         height: 200px;
18         background-color: red;
19         /*經過 line-hight 來垂直居中  此法>= ie8*/
20     }
21 </style>
22 <body>
23     <div class="div1">
24         <div class="div2">
25 
26         </div>
27     </div>
28 </body>
29 </html>

View Code

效果預覽

3、絕對定位

1.負margin

top，left 50%；margin -50%；

缺點：需固定寬高

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         position: absolute;
14         width: 200px;
15         height: 200px;
16         background-color: red;
17         top: 50%;
18         left: 50%;
19         margin-left: -100px;   /*此處爲width的一半，因此應用此法，元素必須固定寬、高*/
20         margin-top: -100px;
21 
22     }
23 </style>
24 <body>
25     <div class="div1">
26         <div class="div2">
27             fdsfsdffdf
28             fdsfdsfsdff
29         </div>
30     </div>
31 </body>
32 </html>

View Code

效果預覽

2.css3 translate

咱們但願實現不固定寬高，在上法上改進。能夠用js，動態添加寬高，但不推薦。其實能夠用css3 translate屬性，由於translate是惟一一個相對於自身寬度計算的屬性

兼容：>=ie9 + 主流

優勢：自適應內容

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         position: absolute;
14         background-color: red;
15         top: 50%;
16         left: 50%;
17         transform:translate(-50%,-50%); 
18         /*應用css3 translate屬性是相對於自身的，此法>=ie9，且寬高自適應*/
19     }
20 </style>
21 <body>
22     <div class="div1">
23         <div class="div2">
24             fdsfsdffdf
25             fdsfdsfsdff
26         </div>
27     </div>
28 </body>
29 </html>

View Code

效果預覽

3.絕對定位 + 相對定位（推薦）

思想與上面的方式是同樣，只是這是基於ie6,7的bug，相對定位位移父元素的50%

缺點：多添加一個容器標籤

優勢：自適應內容

兼容：ie6,7

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .middle-demo-4{
 7         background-color: blue;
 8         height: 300px;
 9         width: 300px;
10         position: relative;
11         }
12         .middle-demo-4 div{
13         position: absolute;
14         top: 50%;
15         left: 50%;
16         }
17         .middle-demo-4 div div{
18             height: 200px;
19             background-color: red;
20         position: relative;
21         top: -50%;
22         left: -50%;
23         }/*ie6 ie7*/
24     </style>
25 </head>
26 <body>
27 <div class="middle-demo-4">
28     <div>
29         <div>dsfdsfdsfdsfdsfdsfdsf</div>
30     </div>
31 </div>
32 
33 </body>
34 </html>

View Code

4.margin：auto

絕對定位下，固定寬高，top：0，bottom：0，會自適應內容，多餘部分會用margin填充

缺點：固定寬高

兼容：>=ie8

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         margin: auto;
14         position: absolute;
15         background-color: red;
16         width: 200px;
17         height: 200px;
18         left: 0;
19         right: 0;
20         top: 0;
21         bottom: 0;
22 
23     }
24 </style>
25 <body>
26     <div class="div1">
27         <div class="div2">
28             fdsfsdffdf
29             fdsfdsfsdff
30         </div>
31     </div>
32 </body>
33 </html>

View Code

結果預覽

4、表格

1.table-cell（推薦）

單元格能夠設置垂直屬性 vertical-align: middle;

優勢：自適應內容

兼容：>=ie8 +主流

缺點：子元素爲浮動、絕對定位無效（注意）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         display: table-cell;
11         vertical-align: middle;
12         text-align: center;
13     }
14     .div2{
15     /*float: left;position: absolute; 子元素爲浮動、絕對定位無效
16         此法>=ie8
17     */}
18 </style>
19 <body>
20     <div class="div1">
21         <div class="div2">
22             fdsfsdffdf
23             fdsfdsfsdff
24         </div>
25     </div>
26 </body>
27 </html>