一、前言：
垂直居中有很多方式，我們要做的不是寫出完美代碼，而是在合適的情況下根據需求選擇合適方式。
主要方式：
- line-height
- 絕對定位
- 表格 display：table-cell
主要需求：
- 固定寬高
- 不固定寬高
主要兼容：
- ie8+ 主流瀏覽器
- ie6,7
二、行高
1. 利用行高與高度相同，實現單行文本居中
缺點：只能是單行文本
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>
2.利用inline-block改進（推薦）
改變display屬性，就可以是塊元素了，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 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>
三、絕對定位
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>
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>
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>
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>
四、表格
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>
五、總結
根據兼容性和自適應內容來考慮 表格/行高法 + 相對定位法
如果固定寬高 負margin法
浙公網安備 33010602011771號