css中DIV元素居中问题

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博客，博客地址如下：

https://blog.csdn.net/u012088576/article/details/68483623 “css中DIV元素居中问题”