一、普通元素三種垂直水平居中

如圖：

image.png

<div class="main"> //html結(jié)構(gòu)
    <div class="content"></div>
</div>
.main{   //main的樣式
     width: 100px;
     height: 100px;
     background-color: #ff7f50;
     display: flex;
     align-items: center;
     justify-content: center;
}

1. absolute小技巧</b>

.content1{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

原理：利用絕對定位元素的盒模型特性，在偏移屬性為確定值的基礎上，設置margin:auto。

2. translate()函數(shù)

.content2{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

原理：利用絕對定位元素的偏移屬性和translate()函數(shù)的自身偏移達到水平垂直居中的效果[注意]IE9-瀏覽器不支持。

3. 使用flex

.main{
    width: 100px;
    height: 100px;
    background-color: #ff7f50;
    display: flex;
    align-items: center;
    justify-content: center;
}

原理：在伸縮容器上使用主軸對齊justify-content和側(cè)軸對齊align-items。

二、文字居中垂直水平居中

image.png

<div class="middle-box"> //html結(jié)構(gòu)
    <div class="middle-inner">
        <p>good good study,</p>
        <p>day day up!</p>
    </div>
</div>

• 1 單行文字垂直居中

  text-align: center;
  line-height = height;
  

• 2 多行文字垂直水平居中

  1. 第一種display:table的方法

     .middle-box {
         display: table;
         height: 200px;
         width: 200px;
         background-color: #20B2AA;
     }
     
     .middle-inner {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
     }
     缺點就是不兼容ie6、ie7.怎么兼容呢？
     兩者寫法：
      1、條件語句寫法
      <!--[if lt IE 8]>
      <style>
         .middle-inner { position: absolute; top:50%;}
         .middle-inner p {position: relative; top: -50%}
      </style>
      <![endif]-->
      2、ie hack寫法
      .middle-box {
          display: table;
          height: 300px;
          border: 1px solid #ff0000;
          width: 400px;
          margin: 0 auto;
          position: relative;
      }
     
      .middle-inner {
          display: table-cell;
          vertical-align: middle;
          *position: absolute;
          *top: 50%;
          *left: 50%;
          width: 100%;
          text-align: center;
      }
     
      .middle-inner p {
          position: relative;
          *top: -50%;
          *left: -50%;
      }