各类元素的水平垂直居中

一、水平居中

1. 行内元素：
   text-align: center
   适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

2. 块级元素：
   对于块状元素（display:block）来说，我们需要将它的左右外边距（即margin-left，margin-right）设置为auto，即可实现块状元素的居中

3. 多个块级元素：
   ①　元素：display: inline-block; 父元素text-align: center;
   将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现

②　使用flexbox：
父元素display:flex; justify-content: center;
只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

二、垂直居中

1. 单个行内元素：
   当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果

2. 多行行内元素：
   组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果

3. 已知高度的块级元素：
   将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值

4. 未知高度的块级元素：

       .item{
       top: 50%;
       position: absolute;
       transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
       }
   

使用transform属性来垂直移动来实现垂直居中。

三、水平垂直居中

1. 已知高度和宽度的元素：
   设置元素定位为absolute，并且设置top,left绝对值为50%，margin-top和margin-left为元素高度一半的负值即可

2. 未知高度和宽度的元素：

• 类似的transform属性来定义

      .item{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       }
  

• 使用table-cell:
  在父元素中设置display: table-cell; vertical-align: middle; text-align:center;

• 使用box（以WebKit为例，其它所需兼容再添。注意浏览器支持情况Firefox 、Safari、Opera 以及 Chrome ）
  display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;

3. 使用flex布局实现：
   在父元素设置display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */

（注意浏览器支持情况Firefox 、Safari、Opera 以及 Chrome ）

*flex和box较适合移动端以及不需要考虑低版本浏览器的开发。