前言
一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中
- 行內元素水平居中
- 行內元素的居中比較簡單，直接使用text-align就可以達到居中效果
/* 行內元素 */
.parent4 {
text-align: center;
}- 塊級元素水平居中(塊級水平居中方法列舉以下幾種)
-
margin auto
這是最常用到的塊級水平居中，利用margin:auto自動達到居中的效果，不過前提是子元素必須知道寬度
- 缺點： 必須提前知道元素的尺寸
/* 必須設置子元素寬度 */
.child1 {
width: 100px;
height: 100px;
margin: 0 auto;
background: aqua;
}
-
利用inline-block實現水平居中
- 缺點: 必須有個父元素對其設置text-align
.parent2 {
text-align: center;
}
/* 必須通過父元素 */
.child2 {
display: inline-block;
/*width: 100px;
height: 100px;*/
background: aqua;
}- 利用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;
}垂直居中
- 行內元素垂直居中
- line-height實現當行文字垂直居中
/* 行內元素，當行文字垂直居中 */
.parent1 {
height: 100px;
line-height: 100px;
background: wheat;
}- 塊級元素垂直居中(塊級元素居中的方法比較多，總結如下)
-
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;
}-
如何在不知道尺寸的情況下垂直居中呢，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%);
}- 塊級元素：絕對定位 + 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;
}- 利用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;
}
- 利用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;
}- 利用僞元素實現居中(這個原理我還沒搞懂，但是實踐過真的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;
}
- 塊級元素：display: flex
缺點：在pc上兼容性不好
.parent10 {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.child10 {
background: blue;
}
總結
以上是分別總結了水平居中和垂直居中常用的方法，要想實現水平垂直居中可以自己組合搭配一下。方法目前總結了這幾種，之後有新的方法也會持續更新，未完待續連載中....