水平居中：行内元素解决方案

方法：只需要把行内元素放在一个属性display为block的父元素中，并且把父元素的text-align属性设置成center

水平居中：块状元素解决方案

方法：子块元素使用margin:0 auto;

缺点：只适合已知宽高的块元素

水平居中：多个块状元素解决方案

方法：将子元素的display属性设置为inline-block，并且把父元素的text-align属性设置成center

水平居中：多个块状元素解决方案(使用flexbox布局实现)

方法：把父元素设置成：dispaly:flex;justify-content:center;

缺点：CSS3弹性布局低版本浏览器不兼容，适合在移动端使用

垂直居中：单行的行内元素解决方案

方法：将要垂直居中的子元素行内元素的height和line-height属性的值设置成和父元素一样的高度即可

垂直居中：多行的行内元素解决方案

方法：组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父元素

垂直居中：已知高度的块状元素解决方案

方法：将父元素设置成：position:relative，子元素：position:absolute;top:50%;margin-top:-(子元素高度的一半)

垂直居中：未知高度的块状元素解决方案

方法：将父元素设置成：position:relative，子元素使用：position:absolute; top:50%; transform:translateY(-50%)

缺点：使用了CSS3属性transform，IE9以下版本不兼容

水平垂直居中：已知宽度和高度的块状元素解决方案1

方法：将父元素设置成：position:relative，子元素使用：position:absolute;top:0;left:0;left:0;right:0;bottom:0;margin:auto;

水平垂直居中：已知宽度和高度的块状元素解决方案2

方法：父元素设置成：position:relative，子元素使用：position:absolute;top:50%;left:50%;margin-top:-(子元素高度的一半);margin-left:-(子元素宽度的一半);

水平垂直居中：未知宽度和高度的块状元素解决方案

方法：父元素设置成：position:relative，子元素使用：position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)

缺点：使用了CSS3属性transform，IE9以下不兼容

水平垂直居中：使用flex布局实现

方法：父元素使用：display:flex; align-items:center; justify-content:center;

缺点：使用了flex布局，低版本浏览器不兼容，适合移动端（首选）