前言
CSS居中一直是一個(gè)比較敏感的話題汰寓，為了以后開發(fā)的方便，樓主覺(jué)得確實(shí)需要總結(jié)一下了苹粟，總的來(lái)說(shuō)有滑，居中問(wèn)題分為垂直居中和水平居中，實(shí)際上水平居中是很簡(jiǎn)單的嵌削，但垂直居中的方式和方法就千奇百怪了毛好。
內(nèi)聯(lián)元素居中方案
水平居中設(shè)置：
- 行內(nèi)元素
- 設(shè)置 text-align:center；
- Flex布局
- 設(shè)置display:flex;justify-content:center;(靈活運(yùn)用,支持Chrome掷贾，F(xiàn)irefox睛榄，IE9+)
垂直居中設(shè)置：
- 父元素高度確定的單行文本（內(nèi)聯(lián)元素）
- 設(shè)置 height = line-height；
- 父元素高度確定的多行文本（內(nèi)聯(lián)元素）
- a:插入 table （插入方法和水平居中一樣）想帅，然后設(shè)置 vertical-align:middle场靴；
- b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；
塊級(jí)元素居中方案
水平居中設(shè)置：
- 定寬塊狀元素
- 設(shè)置 左右 margin 值為 auto；
- 不定寬塊狀元素
- a:在元素外加入 table 標(biāo)簽（完整的旨剥，包括 table咧欣、tbody、tr轨帜、td）魄咕，該元素寫在 td 內(nèi)，然后設(shè)置 margin 的值為 auto蚌父；
- b:給該元素設(shè)置 display:inline 方法哮兰；
- c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%苟弛；
垂直居中設(shè)置：
- 1.使用position:absolute（fixed）,設(shè)置left喝滞、top、margin-left膏秫、margin-top的屬性;
.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}
- 2.利用position:fixed（absolute）屬性右遭，margin:auto這個(gè)必須不要忘記了;
.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
- 3.利用display:table-cell屬性使內(nèi)容垂直居中;
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
- 4.使用css3的新屬性transform:translate(x,y)屬性;
.box{
position: absolute;
transform: translate(50%,50%);
-webkit-transform:translate(50%,50%);
-moz-transform:translate(50%,50%);
-ms-transform:translate(50%,50%);
}
- 5.最高大上的一種，使用:before元素;
.box{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.box:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box.content{
width:60px;
height:60px;
line-height:60px;
color:red;
}
- 6.Flex布局;
.box{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
水平居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
垂直居中
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align:center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
結(jié)語(yǔ)
樓主暫時(shí)掌握了這些居中方法缤削，讀者如果還有好方法或是覺(jué)得那個(gè)地方不對(duì)窘哈，歡迎評(píng)論，不吝感謝亭敢。
