CSS中實現(xiàn)居中的方式

一、水平居中

1.用 text-align + inline-block 水平居中

1.1 實現(xiàn)方法

  • html代碼

    <body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
</body>

  • css代碼

  <style>
      .wrap{
          height: 200px;
          text-align: center;
          border: 1px solid red;
      }
      .wrap .text{
          height: 100px;
          width: 300px;
          display: inline-block;
          border: 1px solid blue; 
      }
  </style>

  • 效果


    text-align居中效果圖
1.2 步驟

（1）先觀察父級元素下的子元素是否為行內(nèi)元素，或具有行內(nèi)元素的特征，如果是塊級元素的話，用display:inline-block;將塊級元素轉(zhuǎn)換成行塊元素
（2）在父級中寫入text-align:center;設(shè)置水平居中

1.3 注意
  • text-align能對文本以及行內(nèi)元素進行水平居中，塊級元素不行
  • 如果要對塊級元素進行居中的話，需要將塊級元素用display:inline-block;設(shè)置成行塊元素后才能居中
  • text-align使用的元素下面的所有具有行內(nèi)元素的特點的元素都能起到作用，是具有繼承性的，如上圖代碼中，藍色div中有span標(biāo)簽，那么span標(biāo)簽也會居中與藍色div中

2.用定位（postion） + 變形（transform）水平居中

2.1 實現(xiàn)方法

  • css代碼

     <style>
        .wrap{
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text{
            height: 100px;
            width: 300px;
            border: 1px solid blue;      
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>

  • 效果圖


    postion定位居中效果圖
2.2 實現(xiàn)步驟

（1）父元素開啟定位（relative，absolute,fixed都可以），并將子元素設(shè)置絕對定位absolute
（2）設(shè)置子元素對于父元素向左移動50%（left:50%;），此時并不是居中狀態(tài)，而是子元素的左邊框位于50%的中線
（3）設(shè)置子元素的變形，與自身現(xiàn)在的狀態(tài)向左移動自身的50%，也就是在X軸上向負方向移動50%（transform: translateX(-50%);）,此時實現(xiàn)居中

2.3 注意
  • 父級元素是否脫離文檔流，不影響子元素水平居中效果，但是transform是css3屬性，存在瀏覽器兼容問題
  • postion定位居中方式，只對父級下面的子元素起作用，對子元素下面的后代元素不起作用

3.用 margin: 0 auto + display: block 水平居中

3.1 實現(xiàn)方法

  • html代碼

    <div class="wrap">
      <span class="text">我是元素1</span>
</div>

  • css代碼

    <style>
        .wrap{
            height: 200px;
            border: 1px solid red;
        }
        .wrap .text{
            height: 100px;
            width: 300px;
            display: block;
            border: 1px solid blue; 
            margin: 0 auto;
        }
    </style>
3.2 實現(xiàn)步驟

（1）先觀察父級元素下的子元素是否為塊級元素，若不是，則先用display: block;設(shè)置為塊級元素
（2）再對子元素塊級元素設(shè)置寬高
（3）在子元素里面寫入margin: 0 auto;實現(xiàn)水平居中

3.3 注意
  • 父級下面的子元素只能是塊級元素，不能是行塊元素和行內(nèi)元素（不能具有行內(nèi)元素特征）
  • 子元素必須設(shè)置寬度，因為子元素塊級元素默認與父級的寬度一致
  • 這個方法只需要對子元素進行設(shè)置就可以實現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會自動分配，實現(xiàn)來外邊距等分效果
  • 當(dāng)同級元素設(shè)置了margin: 0 auto;以后，同級元素之間不能進行設(shè)置margin-top、margin-bottom等操作
  • margin: 0 auto;居中的所有操作都在子元素里面進行操作

4.flex彈性盒子布局水平居中

4.1 實現(xiàn)方法

  • html 代碼

    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
        }
        .wrap .text {  
            border: 1px solid blue;
        }
 </style>

  • 效果圖


    flex布局居中效果圖
4.2 實現(xiàn)步驟

（1）設(shè)置容器為flex布局
（2）用justify-content: center;屬性設(shè)置項目主軸方向（此時主軸方向為水平方向）居中

4.3 注意
  • 不論子元素是塊元素還是行內(nèi)元素，flex都能實現(xiàn)居中
  • flex布局實現(xiàn)水平居中的所有操作都在容器（父元素）里面進行操作

二、垂直居中

1. 固定高度（height） = 行高（line-height）

1.1 實現(xiàn)方法

  • css代碼

    <style>
    .wrap{
      height:300px;
      line-height: 300px;
    }
    .wrap .text {  
      border: 1px solid blue;
    }
</style>

  • 效果圖


    line-height垂直居中效果圖
1.2 實現(xiàn)步驟

（1）設(shè)置父級元素的高度height
（2）設(shè)置父級元素的行高line-height

1.3 注意
  • 次方法只針對父級元素下面只有一個塊級子元素的時候，或者是一行行內(nèi)元素的時候（此時行內(nèi)元素不能進行換行操作）

2. 用定位（postion） + 變形（transform）垂直居中

2.1 實現(xiàn)方法

  • css代碼

    <style>
  .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;
      position: relative;
  }

  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
</style>

  • 效果圖


    postion垂直居中效果圖
2.2 實現(xiàn)步驟

（1）父元素開啟定位（relative，absolute,fixed都可以），并將子元素設(shè)置絕對定位absolute
（2）設(shè)置子元素對于父元素向下移動50%（top:50%;），此時并不是居中狀態(tài)，而是子元素的上邊框位于50%的中線
（3）設(shè)置子元素的變形，與自身現(xiàn)在的狀態(tài)向左移動自身的50%，也就是在Y軸上向負方向移動50%（transform: translateY(-50%);）,此時實現(xiàn)居中

3.display: table-cell + vertical-align 垂直居中

3.1 代碼

  • css代碼

    <style>
  .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;

      display: table-cell;
      vertical-align: middle;
  }

  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
  }
</style>

  • 效果圖


    vertical-align垂直居中效果圖
3.2 實現(xiàn)步驟

（1）將父級元素設(shè)置成display: table-cell;
（2）寫入vertical-align:middle;實現(xiàn)居中

3.3 注意
  • vertical-align屬性具有繼承性，導(dǎo)致父元素內(nèi)文本也是垂直居中顯示的

4. flex彈性盒子布局垂直居中

4.1 實現(xiàn)方法

  • css代碼

    <style>
  .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
  }
</style>

  • 效果圖


    flex垂直居中效果圖
4.2 實現(xiàn)步驟

（1）設(shè)置容器為flex布局
（2）將容器的排序方式設(shè)置為列方向排序（flex-direction: column;）
（3）用justify-content: center;屬性設(shè)置項目主軸方向（此時主軸方向為垂直方向）居中

三、總結(jié)

1.inline-block + text-align 設(shè)置水平居中時只對行內(nèi)元素或行塊元素（具有行內(nèi)元素特征）的元素起作用，有繼承性，會對起后代元素都起作用

2.display: block + margin: 0 auto 設(shè)置水平居中時只對塊級元素起作用，無繼承性

3.display: table-cell + vertical-align設(shè)置垂直居中時，對行內(nèi)元素和塊級元素都起作用，有繼承性

4.用固定高度（height） = 行高（line-height）設(shè)置垂直居中時，下面的塊級元素只能是一個，或者只能有一行行內(nèi)元素

5.用定位（postion） + 變形（transform）設(shè)置水平居中和垂直居中時，對行內(nèi)元素和塊級元素都器作用

6.用flex設(shè)置垂直和水平居中時，對行內(nèi)元素和塊級元素都器作用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容