11種居中對齊這件事

這是我參與更文挑戰的第1天，活動詳情查看： 更文挑戰

源碼地址：github.com/ohsogasne/1… （歡迎你們star，後面也會給你們帶來不少好的做品）

引言：居中對齊做爲一種極其常見的需求，彷佛從理論上來講他是如此簡單又理所固然，可是在實際開發中初學者老是會遇到這樣或那樣的問題，而今天咱們將聊聊十一種我喜歡的居中對齊方式，但願你們有所收穫。James Anderson就說過「44年前咱們就把人類送上月球，但如今咱們仍然沒法在css實現垂直居中」。其實，就像吃中餐會用筷子湯匙同樣，只要你明白「筷子與湯匙」的使用方式而且常用後，即可以熟練掌握。而居中也不例外，當你認識了下面十一種居中對齊方式，不少居中問題都會迎刃而解。下面就讓咱們一塊兒走進「居中的世界」，探訪下「居中王國」的用餐禮儀吧！

一、flexbox

在我看來這是最佳的解決辦法，flexbox在針對居中對齊時咱們只須要使用三行代碼，將需居中元素的父元素設置display：flex;justify-content: center; align-items: center;

/* html部分 */
<div class="box1">flex</div>
/* css部分 */
.box1{
		display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

（圖1）

二、grid

grid佈局也是一個極佳的解決辦法，採用三行代碼解決居中佈局 display: grid; justify-items: center; align-items: center;

/* html部分 */
<div class="box0">grid</div>
/* css部分 */
.box0{
		display: grid;
    justify-items: center;
    align-items: center;
}
複製代碼

（圖2）

（圖3）

三、行內元素居中

行內元素即只佔有本身元素自己大小的元素，用法很簡單，水平上：文本對齊爲居中對齊（text-align: center;）垂直上：行高設置爲與盒子同高（line-height:Box_height)，經過如下代碼你能夠實現 圖3 的第一部分行內元素標準流。

/* html部分 */
<div class="standard1 standard"><span>行內元素標準流</span></div>
/* css部分 */
.standard1 {
    text-align: center;
    line-height: 9.6rem;
    height: 9.6rem;
}
複製代碼

四、單個塊級元素垂直水平居中

塊級元素即單獨佔一行或多行，自己具備寬高與內外邊距。單個塊級元素居中只使用兩行代碼，即margin: auto；line-height:Box_height；text-align: center;

/* html部分 */
<div class="standard2">
            <p>法三:單個塊級</p>
</div>
/* css部分 */
.standard2 p {
    width: 16rem;
    height: 9.6rem;
    margin: auto;
    text-align: center;
    line-height: 9.6rem;
}
複製代碼

五、多個塊級元素垂直水平居中

這裏只須要將塊級元素設置爲行內塊元素再套用行內元素的居中模式便可

/* html部分 */
<div class="standard3 standard">
            <p>法四多個</p>
            <p>塊級元素</p>
            <p>垂直水平居中</p>
</div>
/* css部分 */
.standard3 {
    height: 13rem;
    text-align: center;
    line-height: 4.3rem;
}

.standard3 p {
    display: inline-block;
    width: 20rem;
    height: 4.3rem;
    border: solid 1px red;
}

複製代碼

概括 : 在三、四、5這3個方法中，都是做爲一種標準流居中佈局存在。它做爲最基本的居中應用，如今仍然活躍在各大小項目css代碼中。而我將這類居中佈局分爲三種內容：行內元素居中、單個塊級元素水平居中、多個塊級元素垂直水平居中。咱們能夠看到在 右圖 之中存在兩條灰黑色暗線，在此之中分爲三大模塊。

相同點：一、水平居中，text-align：center 二、垂直居中，行高設置與盒子高度相同

差別性：一、行內元素由於無邊距值只須要設置文字水平與行高 二、塊級元素爲單個對齊時須要設置magin值爲auto 三、多個塊級元素居中時須要將塊級元素轉化爲行內塊元素，再設置其行高等於盒子高度與文字水平對齊才能夠設置其居中（這也是這種標準流居中的一個弱點）

（圖4）

六、負邊距實現法

該方法對應效果圖是圖4的法六。咱們都知道定位原理是子絕父相，首先利用該原理設置該盒子對父元素絕對，經過對top與left設置爲50%，這個時候會發現它實際上是跑到右下方的，緣由在於盒子自己也是有寬高值，而這個時候咱們就須要利用負邊距將這個盒子從新拉回來，也就是拉回負的該盒子寬高的一半。這個時候咱們就能夠獲得對於父元素徹底居中對齊的盒子。

​ 注意，margin是由top到left，也就是說在設置負邊距應該使用公式： -height，0，0，-width

/* html部分 */
<div class="box3">
            <div class="posation1"> HI!</div>
 </div>
/* css部分 */
.box3 {
    background-color: #4285f4;
    position: relative;
		width: 150px;
    height: 100px;
}
.posation1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -75px;
    text-align: center;
    line-height: 100px;
}
複製代碼

七、margin值法

該方法效果對應於圖4的法七，這個方法原理是在於利用子絕父相原理，將子盒子肯定在父盒子中，而margin設置爲auto，所以邊距能夠自動佔用全部空餘空間，此時子盒子將會被擠向左上角。而設置left與top等值爲0 ，也就是子盒子對應於父盒子爲0距離，所以magin會將剩餘空間平均的擠向子盒子使其貼緊父盒子，所以各個方向居中。

正常下margin爲0 ，而設置auto後爲margin將用來計算元素對應方向應該得到的剩餘空間大小 填充規則 (1) 若是一側定值，一側auto，則auto爲剩餘空間大小 (2) 若是兩側均是auto，則平分剩餘空間

/* html部分 */
<div class="box3 box34_init">
      <div class="posation2 p_init">IM </div>
 </div>
/* css部分 */
.box3 {
    position: relative;
}
.posation2 {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
複製代碼

八、calc動態計算法

該方法效果對應於圖4的法八。若是你是一個熟悉css新特性的人，那麼你對calc計算屬性應該不會陌生了，它具備動態計算能力，解決了css沒法計算的問題,原理與負邊距法相同卻節省了不少代碼量。在利用這個特性處理居中的時候套用公式：
複製代碼

/* html部分 */
<div class="box3 box34_init">
            <div class="posation3  p_init">Aben</div>
 </div>
/* css部分 */
.posation3 {
    position: absolute;
    left: calc(50% - 75px);
    top: calc(50% - 50px);
}
複製代碼

概括：在六、七、8這3個方法都是屬於已知盒子大小經過計算獲得居中效果。當咱們在實際開發中都會遇到最多見的狀況就是在知道盒子寬高大小的狀況下，將這個盒子居中，而一般面對這類問題，我總結可使用下列三種方法：負邊距法、margin邊距設置法、calc動態獲取法。右圖4，三個效果圖分別對應於這三種方法。能夠發現他們對於效果來講是沒有區別的，有差別的就是在利用不一樣的代碼去使用，而願意使用何種，經過以上的解說後可任君選擇！

（圖5）

九、table-cell法

​ 當咱們在設置html表格的時候會發現全部元素都跟事先說好的同樣以居中的方式默認排列，爲何呢，緣由在於table的display爲table，而td的display爲table-cell，所以經過將元素設置爲table-cell即可以很輕鬆的實現居中。可是，須要強調一點是你須要明白其餘樣式屬性是否符合你需求，由於這將是連鎖反應。

/* html部分 */
<div class="box4 box34_init">
     <p>HTML</p>
</div>
/* css部分 */
.box4 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
複製代碼

十、translate法

​ translate()函數是css3的新特性.在不知道自身寬高的狀況下，能夠利用它來進行水平垂直居中。當使用：top: 50%;left: 50%;， 是以左上角爲原點，故不處於中心位置translate(-50%,-50%) ，做用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。與負margin-left和margin-top實現居中不一樣的是，margin-left必須知道自身的寬高，而translate能夠在不知道寬高的狀況下進行居中，translate（）函數中的百分比是相對於自身寬高的百分比，因此能進行居中

/* html部分 */
<div class="box5 box34_init">
            <p>CSS</p>
</div>
/* css部分 */
.box5 {
    position: relative;
    background-color: #34a853;
}

.box5 p {
    font-size: 2rem;
    color: aliceblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

（圖6）

十一、僞元素居中法

/* html部分 */
<div class="box6 box34_init posation">
        <p class="bluebox">僞元素</p>
 </div>
/* css部分 */
.box6::before {
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.bluebox {
    display: inline-block;
    vertical-align: middle;
}
複製代碼

前人發展的道路中發現了不只可使用一些屬性將元素居中，還可使用僞元素這種奇招，利用僞元素::before和::after將盒子嵌套到須要擺放居中的盒子邊。用法很簡單：首先設置display：inline-block（由於vertical-align:middle只針對行內元素），其次設置vertical-align:middle使得目標盒子居於僞元素中間，最後將這個僞盒子高度設置爲100%就大功告成了。

寫在最後

接下來會完成什麼做品：一、原生html、css的講解 二、linux系統類，這是想經過寫Linux來加深本身的學習 三、JS、Vue、TS，但願本身能夠更增強大，而且經過本身的努力幫助更多努力前行的人。那麼下期再見，拜拜~~