前端垂直置中

標籤：重設   table   nbsp   blog   order   log   內容   idt   css   

 
基本html結構

1 <div class="out-box align-center">2 <div class="box">相對定位和絕對位置</div>3 </div>

基本css樣式

 .out-box{ 　　background: #27AE60; 　　 height: 200px; 　　 border: 1px solid #555;  　　 margin-bottom: 20px; 　　} .box{ 　　width: 300px; 　　height: 100px;　　 background: #555; }

 

1. 定位布局
利用`relative`和`absolute`進行布局**
style

.align-center{　　position: relative;}.align-center .box{　　position: absolute;　　margin-left: -150px;　　margin-top: -50px;　　left: 50%;　　top: 50%; }

**優點：適合用於長寬固定的情況**
**缺點：長和寬一旦需要改變需要重設`marginleft`和`margin-top`**

2. css3屬性transform和定位進行布局
style

.align-center{ 　　position: relative;} .align-center .box{　　position: relative;　　transform: translate(-50%,-50%);　　left: 50%;　　top: 50%;}

 

*優點：對盒子長寬沒有要求,屬於百分比布局**
*缺點：`transform`屬於css3屬性，低版本ie不支援**

3.table table-cell布局
style 

.align-center{ 　　display: table;　　width: 100%;} .align-center .box{　　display: table-cell;　　text-align: center;　　vertical-align: middle; }

**優點：純table各瀏覽器不會有相容問題；內容可自適應；**
**缺點：不易於擴充，即將淘汰的技術**

4.flex布局
 style

.align-center4{ 　　display: flex;　　display: -webkit-flex;　　align-items: center;　　justify-content: center;} 

.align-center4 .box{}
**優點：簡單，快速。為了更簡單的布局而產生的一種布局技術**
**缺點：相容ie9+,需要加首碼**
 

前端垂直置中