居中的实现（水平、垂直）

// 以下所有的实现都是基于这个表现
    <p>  
       <span class="cent">我要水平居中</span>
     </p>

垂直居中

【1】
line-height 实现单行文本垂直居中

1. line-height表示两条基线之间的距离
2. 两段段文本之间的距离，也就是行高

  p {
      line-height: 50px;
      background-color: sandybrown;
    }

如果没有其他因素的干扰，文本会被一个content area box包裹,它的大小由字体的大小决定,这个时候content area box的大小和line box是相同的,当设置line-height属性之后会发生：

1. 获取半行间距:半行间距=(line-height-content area box(也就是字体的大小))/2。
2. 然后把半行间距分别放置于content area box上下两侧,这样就获取了line box的高度尺寸。于是只要设置行高就可以产生一个高度,并且使文字居中。

【2】

通过绝对定位的偏移属性实现垂直居中

    p {
      position: relative;
      background-color: sandybrown;
      height: 50px;
    }

    .cent {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

若子元素定高，结合绝对定位的盒模型属性，实现居中效果

    p {
      position: relative;
      background-color: sandybrown;
      height: 100px;
    }

    .cent {
      position: absolute;
     // 清除上下的距离样式 
      top: 0;
      bottom: 0;
    // margin 在垂直方向上平分，水平方向是定值  
      margin: auto 0;
      height: 50px;
    }

子元素定高度，从图中可以看出这个盒子是垂直居中了（盒子内部的内容并没有实现垂直居中）

【3】

使用弹性布局实现

1. 在flex 容器中设主轴的方向为列（自上而下）
2. 在flex容器上设置项目在主轴上的排列的方式 center
3. 以上两点的思路，可以使用align-items 定义flex 容器内的项目在交叉轴上的对齐方式

  p {
      display: flex;
      /*
      flex-direction: column;
      justify-content: center;
      */ 
      align-items: center;
      background-color: sandybrown;
      height: 50px;
    }

水平居中

【1】

text-align:center 实现 行内元素水平居中

1. 设置父级元素的 text-align:center
2. 确保子元素是行内元素
3. 子元素会继承父元素的 文本对齐方式

    p {
         text-align: center;
         background: #a52b2b22;
     }

【2】
通过绝对定位的偏移属性实现水平居中

1. translate函数的百分比是相对于自身宽度进行偏移
2. left: 50% 指元素盒子的左边与中点重合，需要配合 transform: translateX(-50%);，才能使盒子的中点与界面的重点重合

    p {
      position: relative;
      background-color: sandybrown;
      height: 50px;
    }

    .cent {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

若子元素定宽，结合绝对定位的盒模型属性，实现居中效果

    p {
      position: relative;
      background-color: sandybrown;
      height: 50px;
    }

    .cent {
      position: absolute;
   // 清除左右的距离样式 
      left: 0;
      right: 0;
   // margin 在水平方向上平分，垂直方向是定值   
      margin: 0 auto;
      width: 50px;
    }

【3】

使用弹性布局实现

1. 在flex 容器中设主轴的方向
2. 在flex容器上设置项目在主轴上的排列的方式

    p {
      display: flex;
      justify-content: center;
      background-color: sandybrown;
      height: 50px;
    }

水平垂直居中

【1】
text-align + line-height实现单行文本水平垂直居中

    p {
    text-align: center;
    line-height: 50px;
    background-color: sandybrown;
    }

【2】
通过绝对定位的偏移属性实现水平垂直居中

 p {
      position: relative;
      background-color: sandybrown;
      height: 100px;
     }

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

若子元素定宽、高，结合绝对定位的盒模型属性，实现居中效果

   p {
      position: relative;
      background-color: sandybrown;
      height: 100px;
     }

    .cent {
      position: absolute;
      left: 0;
      right: 0;    
      top: 0;
      bottom: 0;
    // margin 对上、下、左、右都进行平分  
      margin: auto ;
   // 一定要设置宽、高   
      width: 50px;  
      height: 50px;  
    }

【3】

使用弹性布局实现

    p {
       height: 50px;
      background-color: sandybrown;
      display: flex;
      justify-content: center;
      align-items: center;
    }

http://www.cnblogs.com/xiaohuochai/p/5438791.html