css中DIV元素居中問題和

CSS部分：

DIV元素居中：

設有父DIV元素.center以及子DIV元素a,b…

僅讓a,b在父元素內行居中：

margin:auto;

我的實現如下圖：

有三種方法可以讓子DIV元素在父DIV元素中水平與垂直居中：

1.使用絕對佈局：

.father{ 
width:500px; 
height:500px; 
position:relative; 
background-color:red; 
} 
.son{ 
width:200px; 
height:200px; 
position:absolute; 
top:50%; 
left:50%; 
margin-top:-100px; 
margin-left:-100px; 
background-color:black; 
} 
 

2.使用table-cell形式

.father{ 
width:500px; 
height:500px; 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
background-color:red; 
} 
.son{ 
width:200px; 
height:200px; 
display:inline-block; ps：這句話一定要加，不然沒效果哦 
background-color:black; 
} 

3.使用彈性佈局flex

.father{ 
width:500px; 
height:500px; 
display:flex; 
justify-content:center; 內容水平居中 
align-items:center; 內容垂直居中 
background-color:red; 
} 
.son{ 
width:200px; 
height:200px; 
background-color:black; 
} 
 

4.使用絕對佈局

.father{ 
width:500px; 
height:500px; 
display:relative; 
background-color:red; 
} 
.son{ 
width:200px; 
height:200px; 
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
margin:auto; 
background-color:black; 
} 

上述引用CSDN部落格，部落格地址如下：