css居中總結

前言

一直有個想法要把各類居中的方法總結一下，但仍是一直沒有時間去整理。最近恰好在作樣式重構的項目，順便把一下本身有用過的或積累的居中方法給總結一下。

水平居中

• 行內元素水平居中

1. 行內元素的居中比較簡單，直接使用text-align就能夠達到居中效果

/* 行內元素 */
.parent4 {
    text-align: center;
}

• 塊級元素水平居中(塊級水平居中方法列舉如下幾種)

1. margin auto

   這是最經常使用到的塊級水平居中，利用margin:auto自動達到居中的效果，不過前提是子元素必須知道寬度

   • 缺點： 必須提早知道元素的尺寸

/* 必須設置子元素寬度 */
.child1 {
    width: 100px;
    height: 100px;
    margin: 0 auto; 
    background: aqua;
}

1. 利用inline-block實現水平居中

   • 缺點: 必須有個父元素對其設置text-align

.parent2 {
  
    text-align: center;

}

/* 必須經過父元素 */
.child2 {
    display: inline-block;
    /*width: 100px;
    height: 100px;*/
    background: aqua;
}

1. 利用css3新增的width屬性fit-content實現

   不少狀況下咱們並不清楚一個元素的具體尺寸是多少，可是又要實現水平居中。這個時候咱們想起float，自動撐開寬高，可是惋惜的是float的脫離了文檔流並不能用margin:auto去實現元素的水平居中。inline-block又必須有個父級對其進行設置居中。css3新增長了width裏的屬性實現了元素相似於float,inline-block的包裹效果，而且可使用margin: auto進行居中。fit-content會根據你的內容去包裹你的元素。在此處不細說明，該興趣的小夥伴能夠看看張鑫旭老師對這幾個新增的屬性的講解

/* width的其餘屬性 */
 .parent3 {
    width: fit-content;
    margin: 10px auto;
    background: aquamarine;

}

垂直居中

• 行內元素垂直居中

1. line-height實現當行文字垂直居中

/* 行內元素，當行文字垂直居中 */
    .parent1 {
        height: 100px;
        line-height: 100px;
        background: wheat;
    }

• 塊級元素垂直居中(塊級元素居中的方法比較多，總結以下)

1. margin負邊距實現

   該方法使用絕對定位利用margin負值將其居中，前提是須要 提早知道尺寸

   • 優勢：兼容性不錯
   • 缺點： 須要提早知道尺寸

.parent2 {
        position: relative;
        background: rosybrown;
        height: 100px;
    }
    .child2 {  
        background: blue;
        position: absolute;
        width: 80px;
        height: 40px;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -40px;
    }

1. 如何在不知道尺寸的狀況下垂直居中呢，CSS3——translate屬性的出現爲咱們提供了可能。該方法利用translate以自身的寬高爲基準來達到居中效果，至關於margin負值的做用，不過咱們不須要知道尺寸，translate幫咱們解決了。transform中translate偏移的百分比值是相對於自身大小的，

   • 優勢: 不須要提早知道尺寸
   • 缺點: 兼容性很差(在移動端上基本支持)

/* 塊級元素： 絕對定位 + transform  優勢: 不須要提早知道尺寸
缺點: 兼容性很差*/
.parent3 {
    position: relative;
    background: antiquewhite;
    height: 200px;
}
.child3 {
    background: salmon;
    position: absolute;
    width: 80px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

1. 塊級元素：絕對定位 + margin: auto;

   結合以上兩種，在介紹一個利用絕對定位的一個很好用的方法
   這是從張鑫旭老師的博客搬運過來的詳情戳這裏。

   優勢：不須要根據寬高去作相應的位移，自動幫你居中好了，兼容性好

/* 塊級元素：絕對定位 + margin: auto; 優勢：不須要根據寬高去作相應的位移，兼容性好 */
.parent4 {
    position: relative;
    background: wheat;
    height: 200px;
}
.child4 {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

1. 利用display: table-cell實現垂直居中

   display的table和table-cell通常狀況下用的很少，因此不多有人去關注它。這個實現的原理就是把其變成表格樣式，再利用表格的樣式來進行居中，在某些狀況下仍是很方便的。

/* 塊級元素：display: table-cell */
.parent5 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child5 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
 
/* 水平垂直居中 */
.parent7 {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}
.child7 {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

1. 利用calc()計算屬性

   缺點: 兼容性差，須要計算，消耗性能，須要提早知道尺寸

.parent8 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child8 {
    top:-webkit-calc(50%-50px);
    top:-moz-calc(50%-50px);
    top:calc(50%-50px);
    left:-webkit-calc(50%-50px);
    left:-moz-calc(50%-50px);
    left:calc(50%-50px);
    width: 100px;
    height: 100px;
    background: blue;
    
}

1. 利用僞元素實現居中(這個原理我還沒搞懂，可是實踐過真的ok)

.parent9 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child9 {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent9::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

1. 塊級元素：display: flex

   缺點：在pc上兼容性很差

.parent10 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;  /*垂直居中*/
    justify-content: center;  /*水平居中*/
}
.child10 {
    background: blue;
}

總結

以上是分別總結了水平居中和垂直居中經常使用的方法，要想實現水平垂直居中能夠本身組合搭配一下。方法目前總結了這幾種，以後有新的方法也會持續更新，未完待續連載中....