css水平垂直居中總結

在網頁布局中，垂直居中對齊總是一個繞不過的話題，而且這兩種對齊方式由於瀏覽器渲染方式的不同，也存在很多不同的場景，本文試圖將這些場景一一列舉並給出解決方案，也是對這個知識點的一點回顧和總結。

1.水平居中

水平居中這個問題首先要搞清楚存在兩個條件才能夠稱之為水平居中，即父元素必須是塊級盒子容器，父元素寬度必須已經被設定好，在這兩個前提下我們來看水平居中問題。

場景1：子元素是塊級元素且寬度沒有設定

在這種情況下，實際上也不存在水平居中一說，因為子元素是塊級元素沒有設定寬度，那么它會充滿整個父級元素的寬度，即在水平位置上寬度和父元素一致

html代碼

 

<div class="wrap">
   <div class="non-child">
      non-child
   </div>
</div>

 

css代碼：

 .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;

      }
        .non-child{
            border: 1px solid #000;
            background: green;

        }

結果：

場景2：子元素是行內元素，子元素寬度是由其內容撐開的

這種情況下解決方案是給父元素設定text-align:center;

html代碼：

<div class="wrap center">
    <span class="span">1111</span>
</div>

css代碼

  .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }
 .span{
            background: red;
        }
 .center{
            text-align: center;
        }

結果：

場景3

子元素是塊級元素且寬度已經設定

這種情形存在多種解法，下面一一來列舉

解法1：給子元素添加margin:0 auto;

HTML代碼

<div class="wrap">
    <div class="child auto">
        non-child
    </div>
</div>

css代碼：

.child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
        .auto{
            margin:0 auto;
        }
   .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }

結果

解法2：通過計算指定父元素的padding-left或padding-right

HTML代碼

<div class="wrap padding">
    <div class="child ">
        non-child
    </div>
</div>

css代碼：

 .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
 .padding{
            padding-left: 100px;
        }
 .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }

結果同上，這里計算父元素padding-left或padding-right的方法為(父元素寬度-子元素寬度)/2,注意這里為了計算方便給父元素和子元素都設定了box-sizing:border-box,這樣設定的寬度就是包含border+padding+content整個寬度來計算的，如果不設定box-sizing:border-box，瀏覽器默認是認為content-box,所以設定的寬度僅包含content的寬度，在這種情況下，計算父容器的padding-left或padding-right的方式就是[（父容器content寬度+左右border寬度）-(子容器content寬+水平padding寬+左右border寬)]/2,可以看到較為麻煩，所以這里建議讓父元素和子元素都采取border-box.

解法3：計算得到子元素的margin-left或margin-right

html代碼

<div class="wrap">
    <div class="child margin">
        non-child
    </div>
</div>

css代碼

 .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
 .margin{
            margin-left:100px;
        }
 .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }

結果同上，這里計算子元素margin-left或margin-right的方法同上。

解法4：

通過子元素相對父元素絕對定位

html代碼

<div class="relative">
    <div class="child absolute">
        non-child
    </div>
</div>

css代碼

 .relative{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }
        .absolute{
            position: absolute;
            left:50%;
            margin-left:-50px;
        }
   .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }

結果同上，這里還要設定子元素margin-top為-50是需要消除父元素50%造成的偏移

解法5：利用flex-box

HTML代碼

<div class="flex">
    <div class="child ">
        non-child
    </div>
</div>

css代碼

 .flex{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            display:flex;
            flex-direction: row;
            justify-content:center;

        }
  .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }

結果同上

2.垂直居中

和水平居中一樣，這里要講垂直居中，首先設定兩個條件即父元素是盒子容器且高度已經設定

場景1：子元素是行內元素，高度是由其內容撐開的

這種情況下，需要通過設定父元素的line-height為其高度來使得子元素垂直居中

html代碼

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

css代碼

 .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
        .span{
            background: red;
        }
        .line-height{
            line-height: 300px;
        }

結果

場景2：子元素是塊級元素但是子元素高度沒有設定，在這種情況下實際上是不知道子元素的高度的，無法通過計算得到padding或margin來調整，但是還是存在一些解法。

解法1：通過給父元素設定display:table-cell;vertical-align:middle來解決

html代碼

<div class="wrap table-cell">
    <div class="non-height ">11111</div>
</div>

css代碼

  .table-cell{
            display: table-cell;
            vertical-align: middle;
        }
 .non-height{
            background: green;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }

結果

解法2：flexbox

html代碼

<div class="wrap flex">
    <div class="non-height ">1111</div>
</div>

css代碼

 .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.non-height{
            background: green;
        }
 .flex{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

結果同上

場景3：子元素是塊級元素且高度已經設定

解法1：

計算子元素的margin-top或margin-bottom，計算方法為父(元素高度-子元素高度)/2

html代碼

<div class="wrap ">
    <div class="div1 margin">111111</div>
</div>

css代碼

  .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }
        .margin{
          margin-top: 100px;
        }

結果

解法2：計算父元素的padding-top或padding-bottom，計算方法為(父元素高度-子元素高度)/2

html代碼

<div class="wrap  padding">
    <div class="div1 ">111111</div>
</div>

css代碼

 .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
 .padding{
            padding-top: 100px;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }

結果同上

解法3：利用絕對定位，讓子元素相對於父元素絕對定位

html代碼

<div class="wrap  relative">
    <div class="div1 absolute">111111</div>
</div>

css代碼

 .relative{
            position: relative;
        }
        .absolute{
            position: absolute;
            top:50%;
            margin-top: -50px;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }

結果同上

解法4：利用flexbox

html代碼

<div class="wrap  flex">
    <div class="div1 ">111111</div>
</div>

css代碼

.flex{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }

 結果同上