作为一个前端实习生，一入前端深似海，刚入公司可谓是干啥啥不会，就连个简单H5页面都需要花费大量时间。But经过一个多月的实践后，自己的前端技术提升了不少，基础也更加扎实，逐渐明白”万物皆可div“这个真理。前端页面布局，最重要的莫过于如何随心所欲的控制div的位置，这里我总结了一些常用的div居中方法，希望可以给刚接触前端的小白们提供帮助。
div居中分为两类：水平居中和垂直居中
一、水平居中：让元素在水平轴上居中布局
1.通过设置子元素的margin
.div-parents{
width : 宽度 ;
height : 高度 ;
}
.div-son{
margin : 0 auto ;
}
2.通过绝对定位position : absolute 与 margin 结合（前提已知宽度，不推荐使用）
.div{
width : 宽度 ;
position : absolute ;
left : 50% ;
margin-left : -0.5*宽度 ;
}
3.通过绝对定位position : absolute 与 transform 结合
.div{
position : absolute ;
left : 50% ;
transform : translate (-50% , 0) ;
}
4.通过flex布局（推荐使用）（影响子元素布局）
.div{
display : flex ;
justify-content : center ;
}
5.对于行内元素，如想让div中的文本水平居中
.div{
text-align : center ;
}
二、垂直居中：让元素在纵轴上居中布局
1.通过绝对定位position : absolute 与 margin 结合（前提已知高度，不推荐使用）
.div{
height : 高度 ；
position : absolute ;
top : 50% ;
margin-top : -0.5*高度 ;
}
2.通过绝对定位position : absolute 与 transform 结合
.div{
position : absolute ;
top : 50% ;
transform : translate (0 , -50%) ;
}
3.通过flex布局（推荐使用）（影响子元素）
.div{
display : flex ;
align-items : center ;
}
4.对于行内元素，如想让div中的文本垂直居中
.div-parents{
height : 高度 ；
}
.div-son{
line-height : 父元素的高度 ；
}
三、水平垂直居中：让元素在页面上水平垂直居中布局
通过前面两种居中布局的结合，即可实现水平垂直居中
1.通过绝对定位position : absolute 和 margin 结合（前提已知宽高，不推荐使用）
.div{
position : absolute ;
left : 50% ;
top : 50% ;
width : 宽度 ;
height : 高度 ；
margin : -0.5高度 0 0 -0.5宽度 ；
}
2.通过绝对定位position : absolute 与 transform 结合
.div{
position : absolute ;
top : 50% ;
left : 50% ;
transform : translate (-50% , -50%) ;
}
3.通过flex布局 （对子元素产生影响）（推荐使用）
.div{
display : flex ;
flex-direction : column ;
align-items : center ;
}
4.对于行内元素，如想让div中的文本水平垂直居中
.div{
text-align : center ;
line-height : 父元素的高度 ;
}
