資訊專欄INFORMATION COLUMN
摘要：前言居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。
前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。
我們主要從這幾個方面來了解下居中：
水平居中
垂直居中
水平垂直居中
水平居中水平居中又分為：
文字水平居中
圖片水平居中
已知元素寬度的水平居中
未知元素寬度的水平居中
文字水平居中實現文字的水平居中，是最為簡單的了，加上text-align: center;即可，看以下代碼：
文字水平居中
.text-center {
text-align: center;
}
注意：父元素必須是塊級元素，即display: block;至于什么是塊級元素，不在本文討論的范圍圖片水平居中
圖片水平居中跟文字一樣，也是使用text-align: center;
非圖片文本元素，已知寬度的水平居中 方法一：margin: 0 auto;比如div元素，假設我們已經知道它的寬度是300px,這時候我們就可以這樣設置,加上margin: 0 auto;這句代碼。
我是水平居中的div
.div1 {
width: 300px;
margin: 0 auto;
}
同樣是針對塊級元素才有效果。
方法二：絕對定位+負邊距.parent3 {
position: relative;
}
.child3 {
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px; // 寬度的一半
}
非圖片文本元素，未知寬度的水平居中
方法一：使用text-align: center + inline-block
我覺得比較簡單的方法就是給父元素設置text-align: center;給子元素添加display: inline-block;這樣就行了，還是來看代碼比較直接。
未知元素寬度
.parent {
text-align: center;
}
.child {
display: inline-block;
padding: 20px;
background: red;
}
方法二：使用絕對定位 + transform: translate()
父元素設置相對定位position: relative;;子元素設置絕對定位position: absolute加transform?？匆韵吕樱?/p>
我是水平居中的div
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
padding: 20px;
background: red;
}
注意：為了更好的兼容性，transform需要加上不同瀏覽器的前綴。方法三：使用浮動
還是來看具體的代碼：
我是水平居中的div
.parent2 {
position: relative;
float: left;
left: 50%;
}
.child2 {
position: relative;
right: 50%;
padding: 20px;
background: red;
}
方法四：flex實現水平居中
我是水平居中的div
.parent4 {
position: relative;
display: flex;
justify-content: center;
}
.child4 {
padding: 20px;
background: red;
}
注意：flex有兼容性問題，關于flex的兼容性寫法，大家可以自行百度下，也可以在caniuse查看瀏覽器的兼容情況方法五：fit-content屬性
“fit-content”是CSS中給“width”屬性新加的一個屬性值，他配合margin可以讓我輕松的實現水平居中的效果。這個方法也是我第一次用到，后期有時間再來仔細研究學習下。
來看代碼：
我是水平居中的div
.fitContentDiv {
width: fit-content;
margin: 0 auto;
height: 100px;
background: red;
padding: 20px;
}
必須配合margin: 0 auto;來使用來可以實現居中的效果。
注意：同樣是存在瀏覽器的兼容性問題。垂直居中
文字的垂直居中
圖片的垂直居中
已知元素高度的垂直居中
未知元素高度的垂直居中
文字的垂直居中 方法一：height=line-height這個比較簡單，只需要設置高度height和行高line-height相等即可。看代碼：
我是垂直居中的文字
.txt1 {
height: 100px;
line-height: 100px;
background: red;
}
注意：這個方法有個不好的地方就是只能是針對單行的文字，多行就不適合用。方法二：使用padding
我們設置padding-top和padding-bottom相等就可以了，而且此方法針對多行文字也沒問題。看代碼：
我是垂直居中的文字
.txt2 {
padding-top: 20px;
padding-bottom: 20px;
background: red;
}
注意：這種方法也是有一個明顯的缺陷，就是你不能給文本的父元素設置高度。方法三：table+table-cell
此方法是利用表格單元格的特性，我們直接看代碼：
我是垂直居中的文字（這里面也可以放圖片）
.parent6 {
display: table;
width: 300px;
height: 300px;
background: blue;
}
.child6 {
display: table-cell;
vertical-align: middle;
}
此方法對圖片同樣有效，而且文本也可以多行，是一種不錯的方法。
圖片的垂直居中使用vertical-align: middle，直接看代碼：
.img-va-center {
height: 300px;
line-height: 300px;
background: red;
}
.img-va-center img {
display: inline-block;
vertical-align: middle;
}
已知元素高度的垂直居中
方法一：絕對定位+負邊距
看代碼：
我是垂直居中的div
.parent6 {
position: relative;
height: 300px;
background: red;
}
.child6 {
position: absolute;
top: 50%;
left: 0;
width: 50px;
height: 50px;
margin-top: -25px;
background: gray;
}
未知元素高度的垂直居中
方法一：絕對定位+transform
直接上代碼了：
我是垂直居中的div
.parent7 {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.child7 {
position: absolute;
top: 50%;
width: 50px;
padding: 10px;
background: gray;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
注意：同樣需要考慮transform的兼容性問題。方法二：flex+margin
我是垂直居中的div
.parent8 {
display: flex;
width: 300px;
height: 300px;
background: blue;
}
.child8 {
margin: auto;
padding: 20px;
background: gray;
}
注意：此方法要考慮flex的兼容性問題。方法三：flex+align-items
我是垂直居中的div
.parent9 {
display: flex;
align-items: center;
width: 300px;
height: 300px;
background: blue;
}
.child9 {
padding: 20px;
background: gray;
}
注意：此方法要考慮flex的兼容性問題。水平垂直居中
水平垂直居中就是把水平居中跟垂直居中的方法結合起來使用啦，這里就不再舉例了。
總結這里雖然列舉了那么多例子，但是方法終歸是死的，業務需求是變化多端的，具體還是要根據我們項目的業務需求來搭配使用。css很強大，要實現同一個功能，可以有很多種方法，并不只有我列舉的這些，關鍵是要找到適合業務需求的方法，如果你有更好的方法，歡迎留言討論，大家一起學習進步！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117192.html
摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。 這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...
摘要：所謂對稱加密，就是加密和解密使用同一秘鑰，這也是這種加密算法最顯著的缺點之一。非對稱加密算法由于對稱加密在通信加密領域的缺陷，年和提出了非對稱加密的概念。非對稱加密，其主要缺點之一就是慢，適合加密少量數據。 1. 加密的目的 加密不同于密碼，加密是一個動作或者過程，其目的就是將一段明文信息（人類或機器可以直接讀懂的信息）變為一段看上去沒有任何意義的字符，必須通過事先約定的解密規則才能將...
摘要：所謂對稱加密，就是加密和解密使用同一秘鑰，這也是這種加密算法最顯著的缺點之一。非對稱加密算法由于對稱加密在通信加密領域的缺陷，年和提出了非對稱加密的概念。非對稱加密，其主要缺點之一就是慢，適合加密少量數據。 1. 加密的目的 加密不同于密碼，加密是一個動作或者過程，其目的就是將一段明文信息（人類或機器可以直接讀懂的信息）變為一段看上去沒有任何意義的字符，必須通過事先約定的解密規則才能將...
摘要：前端日報精選第期寫給前端應屆生的職業規劃建議應用編譯優化之路進階篇命名空間模式解析源碼解析之任務管理入門教程快速上手聊聊改變歷史中文正式發布，帶來種新的圖表類型關系圖解好好寫代碼吧使用手冊掘金發布在即將全面支持掘金仿懂球帝 2017-10-10 前端日報 精選 【第1074期】寫給前端應屆生的職業規劃建議webpack 應用編譯優化之路JS進階篇--命名空間模式解析gulp源碼解析之任...
摘要：移動精英開發社群的第期，也是圍繞架構這個話題進行討論。本次我們希望結合實際開發中遇到的問題，來聊聊移動端的架構設計。這樣的模式改進一些，可能會更適合移動端架構。潘衛杰之前我們公司移動端的大項目就是插座式開發的，批量出各個行業的。 此前，58 同城的技術委員會執行主席沈劍在 OneAPM 的技術公開課上分享過一個主題，「好的架構不是設計出來的，而是演技出來的」。因為對很多創業公司而言，隨...
閱讀 1341·2021-11-15 11:37
閱讀 2220·2021-09-23 11:21
閱讀 1307·2019-08-30 15:55
閱讀 2113·2019-08-30 15:55
閱讀 2821·2019-08-30 15:52
閱讀 2826·2019-08-30 11:12
閱讀 1581·2019-08-29 18:45
閱讀 1894·2019-08-29 14:04
