css的居中，可以分为水平居中和垂直居中，实现居中的方式有以下几种：
1.text-align:center 块状元素，水平居中
2.margin:0 auto 水平居中 以外边框为参照物，上下外边框距为0，左右外边框距浏览器会自动计算平分
3.line-height 垂直居中 通过设置行间距。line-height只适用于单行文本的元素，多行元素不适用。
4.float属性+relative定位 给父元素设置float：left ,然后父元素整体向左移动50%（position:relative;left:50%），这时父元素要清除浮动（clear：both）,然后再给子元素整体向左移动50%(position:relative;left:-50%)
5.根据绝对定位absolute+margin实现水平居中 给父元素一个相对定位relative，利用绝对定位absolute，配合margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相对于相对应于relative的绝对定位absolute，需要定宽。relative只是为了给子元素定位用的
6.使用absolute绝对定位+translate 移动转换，实现水平垂直居中 使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。
7.利用table布局，默认垂直居中（vertical-align:middle） 如果不是table布局的话可以：仿table（display：table-cell）,一样使用vertical-align:middle实现居中对齐
8.flex布局 父元素使用display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中
9.flex布局+margin 父元素使用flex布局（display：flex）,子元素使用margin：auto
下面来聊聊遇到的问题，相对来说有些棘手，第一次遇到。涉及到css3.0盒模型display:-webkit-box;的使用：
要实现div中值水平居中
子容器样式中已经给了text-align:center
1.使用margin:0 auto让其居中是无效的
2.使用flex布局（justify-content: center; align-items: center）也没有实现其居中的效果
3.之后又试了：box-align：center(box-align表示父容器中子容器的垂直对齐方式)，这个其实是用错了，写出来只是想让大家知道，了解一下
最后，使用了box-pack：center（box-pack表示父容器里面子容器的水平对齐方式）
但是：唯一遗憾的是，box-pack在firefox与opera暂时不支持，只有safari、chrome支持
