css居中常用的幾種方式

行內(nèi)元素水平、垂直居中

• 方案一(不設(shè)置居中元素寬高)，代碼如下：
  使用display: table;display:table-cell；vertical-align:middle;屬性

 <!--html代碼如下：-->
  <div class="panel-body line-align-center-one-content">
    <div class="line-align-center-one">
       <span class="mark-item">
          這里是測(cè)試的內(nèi)容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum nobis unde vel. Ab accusantium distinctio ex ipsa necessitatibus. Dolorum facere impedit laudantium magni minima molestiae, nam quidem soluta veniam.
       </span>
    </div>
  </div>

 /*css代碼段*/
 .line-align-center-one-content{
   display: table;
   width: 100%;
 }
 .line-align-center-one{
   height: 400px;
   display: table-cell;
   vertical-align: middle;
   border: 1px solid #e4393c;
   text-align: center;
 }
 .mark-item{
   background: #ccc;
   color: #fff;
 }

這里主要是使用text-align:center;是元素水平居中

• 方案二：使用絕對(duì)定位+位移(不設(shè)置居中元素寬高)，代碼如下：

<!--html代碼段如下-->
 <div class="line-align-center-two">
    <span class="mark-two">
       這里是一個(gè)行內(nèi)元素 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem pariatur recusandae voluptate. Amet, animi architecto commodi cumque distinctio, dolorum eaque laborum modi molestiae mollitia nesciunt perferendis rem tenetur voluptate!
    </span>
 </div>

  /*css代碼段如下*/
  .line-align-center-two{
    position: relative;
    height: 400px;
    border: 1px solid #e4393c;
  }
  .mark-two{
    background: #ccc;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) ;
  }

• 方案三（不設(shè)置居中元素寬高）：使用相對(duì)定位+位移+text-align: center;代碼如下：

 <-- html代碼段如下-->
 <div class="line-align-center-three">
    <span class="mark-three">
       這里是一個(gè)行內(nèi)元素
    </span>
 </div>

  /*css代碼段如下*/
  .line-align-center-three{
    height: 400px;
    border: 1px solid #e4393c;
    text-align: center;
  }
  .mark-three{
    position: relative;
    top: 50%;
    transform: translateY(-50%) ;
    background: #ccc;
    color: #fff;
  }

• 方案四（不設(shè)置居中元素寬高）：使用flex布局，代碼如下：

  <!--html代碼-->
  <div class="line-align-center-four">
    <span class="mark-four">
      這里是一個(gè)行內(nèi)元素 lorem
    </span>
  </div>

  .line-align-center-four{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
    height: 400px;
    border: 1px solid #e4393c;
    justify-content: center;/*指定水平居中*/
  }
  .mark-four{
    background: #ccc;
    color: #fff;
  }

• 方案五（不設(shè)置居中元素寬高）：使用偽類，代碼如下：

    <!--html代碼如下-->
    <div class="line-align-center-five">
      <span class="mark-five">
          這里是一個(gè)行內(nèi)元素 Lorem
      </span>
    </div>
  

    /*css代碼如下*/
    .line-align-center-five {
      height: 400px;
      border: 1px solid #e4393c;
      text-align: center;/*水平居中*/
      font-size: 0;/*這一個(gè)很重要*/
    }
    .line-align-center-five:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
    .mark-five {
      font-size: 14px;
      display: inline-block;
      vertical-align: middle;
      background: #ccc;
      color: #fff;
      line-height: 26px;
    }
  

塊級(jí)元素，水平、垂直居中

塊級(jí)元素的居中同樣可以使用上述的行內(nèi)元素的居中方案。

通用方案

• 在已知容器和居中元素的寬高的情況下，可以使用margin來(lái)調(diào)節(jié)元素居中；

<!--html如下-->
<div class="common-item">
  <div class="common-one">
    這里是內(nèi)容區(qū)域，寬高100
  </div>
</div>

 /*css代碼如下：*/
 .common-item{
   height: 400px;
   border: 1px solid #e4393c;
 }
 .common-one{
   width: 100px;
   height: 100px;
   border:1px solid blue;
   margin: 150px auto 0;
 
 }

• 在已知居中元素的寬高尺寸的情況下，可以使用絕對(duì)定位或相對(duì)定位+margin負(fù)值來(lái)實(shí)現(xiàn)

 <div class="common-item-two">
   <div class="common-two">
     這里是內(nèi)容區(qū)域，寬高100
   </div>
 </div>

  .common-item-two{
    height: 400px;
    border: 1px solid #e4393c;
    position: relative;
  }
  .common-two{
    width: 100px;
    height: 100px;
    border:1px solid blue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }

或

   <div class="common-item-two">
     <div class="common-two">
       這里是內(nèi)容區(qū)域，寬高100
     </div>
   </div>

  .common-item-two{
    height: 400px;
    border: 1px solid #e4393c;
  }
  .common-two{
    width: 100px;
    height: 100px;
    border:1px solid blue;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }

• 通過(guò)line-height屬性來(lái)設(shè)置內(nèi)容居中這里就不再做演示了。

歡迎大家多多指教。

所有完整代碼請(qǐng)查看GitHub地址