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;
        }

 結果同上