CSS实现子元素div水平垂直居中

div基本布局

<div class=\"main\"><div class=\"center\"></div></div>

css样式

1. 配合定位与margin：auto
父元素加相对定位，子元素加绝对定位

.main{width: 300px;height: 300px;background-color: red;position: relative;}.center{width: 100px;height: 100px;background-color: skyblue;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

2.利用flex布局，设置水平与竖直方向的内容居中。

.main{width: 300px;height: 300px;background-color: red;display: flex;justify-content: center;align-items: center;}.center{width: 100px;height: 100px;background-color: greenyellow;}

3.利用position:absolute与transform
:这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。

.main{width: 300px;height: 300px;background-color: red;position: relative;}.center{width: 100px;height: 100px;background-color: pink;position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}

4.定位 与负margin配合
只适合子盒子长宽固定的情况

.main{width: 300px;height: 300px;background-color: red;position: relative;}.center{width: 100px;height: 100px;background-color: pink;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}

5.display:table-cell
display:table-cell；与vertical-align:middle 的作用是让子盒子在数值方向上居中
margin:auto;则让子盒子在水平方向居中，若只想让盒子在某个方向居中，去掉另一个就可以了。

.main{width: 300px;height: 300px;background-color: red;display: table-cell;vertical-align: middle;}.center{width: 100px;height: 100px;background-color: #000;margin: auto;}