前端小白--CSS实现水平垂直居中

目前通过CSS样式实现垂直居中水平居中的绝对定位居中的方法有13种，本文主要介绍几种实用的方式,其中前两种是目前应用最广泛的。

1.transform的变形居中

.father{     position: relative;}.child{    position: absolute;    top: 50%;     left: 50%;    -webkit-transform: translate(-50%,-50%);    -ms-transform: translate(-50%,-50%);    transform: translate(-50%,-50%);}

tips: 常用的居中方式，需要注意父级相对定位子级才能绝对定位。
1.支持跨浏览器，包括IE8-IE10.
2.无需其他特殊标记，CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
6.内容块可以被重绘。
7.完美支持图片居中。

2.table表格居中

.father{    display:table;    text align:center;}.child{    display:table cell;    vertical-align:middle;}

tips: 常用的居中方式之一，将父盒子跟子盒子变成table。

3.margin:auto实现居中

.father{    position:relative;}.child{    width: 50%;      height: 50%;      overflow: auto;      margin: auto;      position: absolute;      top: 0; left: 0; bottom: 0; right: 0;  }

tips: 我们经常用margin:0 auto来实现水平居中，实际上，实现垂直居中仅需要声明元素高度，margin:auto就可以实现垂直居中。
imperfection:
1.必须声明高度（查看可变高度Variable Height）。
2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。
3.在Windows Phone设备上不起作用。

4.fixed实现居中

.child{    position:fixed;    z-index: 99;//层叠属性值}

tips: 层叠属性值根据实际要求去设置，一般不建议太大；如果需要运用到容器内，只需要给父级添加position:relative即可实现。

5.margin实现居中

.child{    margin:0 auto;//根据实际上下边距调整    display:block;//根据实际实际要求是否转化成行列元素和块级元素}

tips: 层叠属性值根据实际要求去设置，一般不建议太大；如果需要运用到容器内，只需要给父级添加position:relative即可实现。