子盒子在父盒子中水平/垂直/水平垂直居中

垂直居中

1.行內元素：line-height與height值保持一致即可【僅對單行文本生效】

// 父元素
height: 200px;
line-height: 200px;

 

水平垂直居中

1.定位position+margin外邊距（需要知道子盒子的寬高）

/*父盒子*/
position: relative;
/*子盒子*/
position: absolute;            
top: 50%;            
left: 50%;            
margin-top: -50px;            
margin-left: -50px;

2.定位position+transform（不需要知道寬高）

/*父盒子*/
position: relative;
/*子盒子*/
position: absolute;            
top: 50%;            
left: 50%;            
transform: translate(-50%,-50%);

優點：1. 內容可變高度 2. 代碼量少

缺點： 1. IE8不支持 2. 屬性需要寫瀏覽器廠商前綴 3. 可能干擾其他transform效果 4. 某些情形下會出現文本或元素邊界渲染模糊的現象

3.使用彈性盒子flex布局（不需要知道寬高）

 

/*父盒子*/ 
display: flex;
justify-content: center; 
align-items: center;

 

4.margin：auto（不需要知道寬高）

父盒子本身需要寬度；

設置margin自動適應，然后設置定位的上下左右都為0，就如四邊均衡受力從而實現盒子的居中；

position: absolute;        
left:0;        
right:0;        
top: 0;        
bottom: 0;       
margin: auto;

如果父子元素都有設置寬高：margin: 150px auto;

5.table-cell

將父盒子設置為table-cell(能夠使元素呈單元格的樣式顯示)，並設置text-align: center(使內容水平居中)；vertical-align: middle(使內容垂直居中);。子盒子設置為inline-block可以使其內容變為文本格式，也可設置寬高；

.father{    
    display: table-cell;    
    width: 400px;    
    height: 400px;    
    vertical-align: middle;     
    text-align: center;
}
.child{    
    display: inline-block;    
    vertical-align: middle;
}