水平居中
1、把margin设为auto（块状元素，居中的块元素需要有固定的宽度，因为占据100%宽度）
把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
2、使用 text-align:center（行内元素、多个块状元素）
只能对图片，按钮，文字等行内元素(display为inline或inline-block，inline-table，inline-flex)进行水平居中。将inline元素包裹在一个display属性为block的父级元素中（如,div, nav)，设置这个父级元素属性: text-align:center即可。
3、使用flexbox布局 (css3，多个块状元素)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex；justify-content:center即可。
4、transform(css3，未知宽度的块状元素)
因为无法指定margin-left的偏移量，所以这里使用transform属性，水平移动-50%即可。元素垂直居中代码left: 50%；position: absolute；transform: translateX(-50%)；
垂直居中
1、使用line-height让单行的文字垂直居中（单行的行内元素）
将inline元素的height和line-height同时设置为父元素的高度。
2、使用表格
如果使用的是表格的话，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以使里面内容的水平和垂直居中,表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。
3、使用display:table-cell来居中（多行的行内元素）
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素。
4、使用flexbox布局 (css3，多个块状元素)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex；align-items: center;（需要设置高度来查看垂直居中效果）
5、transform(css3，未知高度的块状元素)
因为无法指定margin-top的偏移量，所以这里使用transform属性，垂直移动-50%即可。元素垂直居中代码top: 50%；position: absolute；transform: translateY(-50%)；
水平垂直居中
1、使用绝对定位来进行居中（已经知道它们的宽度和高度的块状元素）
绝对定位进行居中的原理是通过把待居中元素设置为绝对定位，这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。
2、使用flex布局居中
设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可。
3、transform(css3，未知宽度和高度的块状元素)
将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可。元素垂直居中代码top: 50%；left: 50%；position: absolute；transform: translate(-50%,-50%)；
