1.水平居中text-align：center;
在没有浮动的情况下，我们可以让需要居中的块级元素设为inline/inline-block，然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素（span，img，a等），直接在其父元素上添加text-align：center；即可。
.father{width: 200px;height: 200px;background-color: aqua;text-align: center;}.son{width: 100px;height: 100px;background-color: brown;display: inline-block;}<div class="father"><div class="son"></div></div>
2.使用margin：0 auto;水平居中
居中的元素必须是块级元素，如果是行内元素，需要添加display：block；而且元素不浮动。
.father{width: 200px;height: 200px;background-color: aqua;}.son{width: 100px;height: 100px;background-color: brown;margin: 0 auto;}<div class="father"><div class="son"></div></div>
3.定位实现水平垂直居中（需要计算偏移值）
必须要知道居中的元素的宽高
.father{width: 200px;height: 200px;background-color: aqua;position: relative;}.son{width: 100px;height: 100px;background-color: brown;position: absolute;left: 50%; top:50%;margin-left: -50px;margin-top:-50px;}<div class="father"><div class="son"></div></div>
4.定位实现居中（不需计算偏移值）
margin：auto;和四个方向定位搭配使用,不需要知道元素的宽高
.father{width: 200px;height: 200px;background-color: aqua;position: relative;}.son{width: 100px;height: 100px;background-color: brown;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}<div class="father"><div class="son"></div></div>
5.定位配合css3新属性transform：translate（x,y）使用
不需要知道元素的宽度和高度，在移动端用的比较多，因为移动端对css3新属性的兼容性比较好。
.father{width: 200px;height: 200px;background-color: aqua;position: relative;}.son{width: 100px;height: 100px;background-color: brown;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}<div class="father"><div class="son"></div></div>
6.css3新属性calc()和定位配合使用（需要知道元素的宽高）
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
.father{width: 200px;height: 200px;background-color: aqua;position: relative;}.son{width: 100px;height: 100px;background-color: brown;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);}<div class="father"><div class="son"></div></div>
7.使用flex弹性盒布局 实现水平垂直居中
不需要知道元素本身的宽高以及元素的属性
.father{width: 200px;height: 200px;background-color: aqua;display: flex;justify-content:center; align-items:center; }.son{width: 100px;height: 100px;background-color: brown;}<div class="father"><div class="son"></div></div>
