導語：元素居中對齊在很多場景看上去很和諧很漂亮。除此之外，對於前端開發面試者的基礎也是很好的一個考察點。下面跟着作者的思路，一起來看下吧。
場景分析
- 一個元素，它有可能有背景，那我要它的背景居中對齊
- 一個元素，它還有可能有個父級元素，那我要它居中於其父級元素
- 一個元素，它也有可能還帶有一些子內容，我要讓它的子內容居中
場景建模
根據場景分析提出的一些假設，我們試着去建立對應的模型，下面是分別根據上面的三個場景設計的相關模型。
場景實現
相關說明
為了統一，這裏我們定義一個400*400px的帶着黑色邊框粉紅色身體的類名為.box的父容器，它有可能會有一個200*200px的帶着原諒色身體的類名為.box-son的子容器。這裏為了效果能夠直觀且明顯，筆者故意把背景圖片的原始大小處理成小於宿主像素的大小。好吧，我們開始吧！
背景居中
我們做這樣一件事，在一個div容器中，我們通過background-image屬性引入一張背景，之後我們期望這張引入的背景呢，它能夠水平垂直居中於宿主元素。
這裏介紹兩個屬性background-repeat和background-position，如果你初中英語好的話，我想你也應該知道了，這裏字面意思就是這個屬性的意思。一個是設置背景圖片怎麼鋪宿主元素（默認時鋪滿的）更美麗的，另一個是設置背景圖片相對於宿主元素的的位置，你可以傳像素、百分比、相關方向單詞（top、bottom、left、right）給它。當其為百分比的時候，它的計算公式如下：
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
簡言之，就是宿主元素的寬高減去圖片寬高乘以相關百分比就是相對於宿主元素左上角那個原點的位置。
在背景圖片不重複的情況下，你想讓一張圖片居中於宿主元素的方法，可以有background-postion: center center、background-postion: 50%, 50%,也可以簡寫成background-postion: center或者background-postion: 50%
所以，在樓上這些前提下，我們大致能夠歸出一個類，形如：
/** 這裏以複雜寫法的百分比為例， 分別代表距離宿主元素左上角的x和y軸的距離**/
.box-son {
background-repeat: no-repeat;
background-position: 50%, 50%;
}
文字內容居中
如果宿主元素的內容是文字之類的，我們期望它能夠居中於宿主元素，這裏用到兩個屬性，一個是text-align，一個是line-height。text-algin:center可以使內容水平居中於宿主元素，將line-height設置成宿主元素相同的高度，便可讓宿主元素垂直居中。
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example11
子元素居中於父元素
相關說明
這裏解釋下，父相子絕，這個是我閹割了“父級元素相對定位，子級元素絕對定位”這句話濃縮后的叫法。後面出現這個概念我就不過多再進行重複介紹了。
父相子絕 + margin: auto
父元素相對定位子元素絕對定位后，設置其top、right、bottom、left都為0，之後我們將其的margin設置為auto。這樣子的話，父級元素與子級元素他們之間空出來的部分都會被這個margin均勻撐開。
.box-position {
position: relative;
}
.box-example1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example1
父相子絕 + 負值margin
父元素相對定位子元素絕對定位后，子元素設置top: 50%; left:50%;，這裏的百分比參考值是相對於父元素的寬高，參考的點是父元素的左上角和子元素的左上角，所以我們需要矯正一下，減去子元素寬高的一半。這件事可以讓子元素的margin代勞。
.box-position {
position: relative;
}
.box-example2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
相關例子鏈接： https://ataola.github.io/show/zj/center-middle.html#example2
父相子絕 + 平移（translate）
在樓上那個例子的基礎上，為了矯正子元素的偏移，我們其實還可以用css的平移屬性。這個平移的百分比是相對於其本身的寬高的，所以是向反方向50%。
.box-position {
position: relative;
}
.box-example3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example3
父子double相（不推薦，做着玩玩的）
一個不成熟的做法哈，父子都是相對定位也還是可以勉強居中的，硬算嘛，這裏沒有太大價值就不展開了。
.box-position {
position: relative;
}
.box-example4 {
position: relative;
top: 90px;
left: 90px;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example4
父子double相 + rem（不推薦，同樓上）
沒有太大價值，略過。
相關例子鏈接: https://ataola.github.io/show/zj/center-middle.html#example5
父相子絕 + calc
calc這個css屬性可以允許在聲明css屬性值時執行一些計算，回到我們之前的那個矯正偏移量的模型上，那麼這裏很容易想到子元素top、left屬性設置成50%減去子元素一半的這樣一個模型。
.box-position {
position: relative;
}
.box-example6 {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example6
新舊flex
flex布局，但凡一個正經點的初面都會遇到的，因為它好用也很常用，這裏介紹兩種，一種是新版的flex布局的寫法，一種是舊版的flex布局的寫法
flex布局你就把它看成是一條軸線，一條長得還挺夯實的軸線，在這條軸線上，我們想要放一個盒子，有很多种放法，具體的可以搜下阮一峰老師的教程這裏不再贅述。一個化繁為簡的想法哈，這個是跟琦瑞哥學到的，就是我們很多時候也不一定能記得住那麼多屬性，我們期望做這樣一件事，就是把它化抽象為形象。我們可以用具體的方位去表達我們的想法，簡言之就是封裝成一個類庫，然後用一些接地氣的類名去控制flex布局。
有興趣的童鞋可以看下我實現的一個低配版的css樣式庫：https://ataola.github.io/show/box/assets/taolaui/flex.css
新版flex的寫法
在不改變軸方向的情況下，其父元素設置align-items: center;表示垂直居中，justify-content: center;表示水平居中。
父元素設置：
.flex {
display: flex;
}
.flex-middle {
align-items: center;
}
.flex-center {
justify-content: center;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example7
舊版flex的寫法
這裏就是提及一下有這麼種存在，讀者用新版的寫法就好。
.box-old {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example8
table布局
父元素設置display: table,子元素設置display:table-cell，在只有一個子元素的情況下它會盡可能撐滿父元素，多個子元素的情況下水平均分。設置vertical-align: middle可以使得其內容垂直居中。
.box-table {
display: table;
}
.box-son-table {
display: table-cell;
vertical-align: middle;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example9
grid布局
前面我們提到的flex布局時軸布局是一維的，這裏的grid網格布局時二維的是平面的。將其父元素設置成display：grid，然後子元素設置align-self: center;表示垂直居中，justify-self: center;表示水平居中。
.box-grid {
display: grid;
}
.box-son-grid {
align-self: center;
justify-self: center;
}
相關例子鏈接：https://ataola.github.io/show/zj/center-middle.html#example10
最後
相關實現地址已開源：https://ataola.github.io/show/zj/center-middle.html，若有不足之處，供批評指正！
其他網頁設計基礎總結：https://ataola.github.io/show/
參考文獻
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
本作品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
