css 垂直居中和水平居中

一、 水平居中

1. 行内元素inline、inline-block
   行内元素水平居中，直接在父盒子中设置text-align:center
2. 块元素居中

已知盒子的宽度：
方法一：  margin : 0 auto;   // 最简单实现
方法二：  position: absolute; left： 50%; margin-left: -(宽度值/2);
 // 绝对定位，左侧盒子的一般的宽度

未知盒子的宽度：
方法三：dispaly: inlint-block;
父元素设置： text-align: center;
方法四： 绝对定位
在知道盒子宽度的时候，我们可以margin-left盒子宽度的一半，在不知道盒子宽度的情况下也可以水平居中
.pagination {
  position: relative;
}
.pagination ul {
  position: absolute;
  left: 50%;
}
.pagination li {
  line-height: 25px;
  margin: 0 5px;
 float: left;
  position: relative;    /*注意，这里不能是absolute*/
  right: 50%;
}
解释如图：

方法五：CSS3的flex实现水平居中
父盒子设置
 #container{
    justify-content:center;
    display:flex;
 }

二、垂直居中

1. 行内元素inline、inline-block
   行内元素垂直居中，直接在父盒子中设置display:table-cell;vertical-align:middle
2. 块元素居中

已知盒子的高度:
方法一： 绝对定位
 position: absolute; top： 50%; margin-top: -(高度值/2);

不知盒子的高度：
方法二： 绝对定位与margin
父元素  position: relative
子元素 
   position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
方法三：Css3显威力（很通用，无需设置宽高）
父元素  position: relative
子元素  
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  // 移动
 方法四：flex布局
    父元素设置
    display:flex;
    align-items: center;

总结：CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题
某些浏览器仍需使用前缀写法: display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀