水平居中在工作中運用非常頻繁署驻，往往標題奋献、或者重要的內(nèi)容都需要居中展示，美觀且引人注目旺上。那么你知道茴香豆的茴字瓶蚂，啊，呸宣吱。水平居中有幾種寫法嗎窃这？
1.外邊距-margin：0 auto;
html:
<div class="box"></div>
css:
body{
margin:0;
font-size: 32px;
line-height: 50px;
}
.box{
margin:0 auto;
width:300px;
height:300px;
background: #66ccff;
}
margin：auto水平居中.png
水平方向上margin的值為auto，瀏覽器自動計算橫向外邊距凌节，使居中钦听；
那么垂直方向上也賦予auto值，這樣水平和垂直方向都居中了呢倍奢？哈哈哈朴上，你很有想法，跟我學做.噢卒煞，不痪宰。你，你去試試呢。
Tip：
- （1）元素必須為塊級元素衣撬，不過你可以在喜歡的元素樣式表上加一條：display:block;可以將元素轉(zhuǎn)換為塊級元素乖订；
- （2）元素需要設(shè)置寬度；如果不知道該有多寬怎么辦具练？有適當?shù)臋M向外邊距的時候乍构，直接把auto替換成具體的數(shù)值，這樣塊元素會繼承父級剩余的寬度扛点。
2.文本對齊方式-text-align:center;
html:
<div class="wrap">
<a href="#">這是一個a標簽</a><br>
<span>這是一個內(nèi)嵌標簽</span><br>
</div>
css:
body{
margin:0;
font-size: 32px;
line-height: 50px;
}
.wrap{
width:100%;
text-align: center;
background-color: #66ccff;
}
text-align：center水平居中.png
?通過設(shè)定父級文本居中排列哥遮，行內(nèi)元素以及行內(nèi)塊水平居中顯示。
Tip：
- （1） 元素必須為行內(nèi)元素或者行內(nèi)塊元素陵究，如果有必要眠饮，你可以可以使用display:inline||inline-block;將元素轉(zhuǎn)為行內(nèi)或者行內(nèi)塊元素；
- （2） 兼容性問題：ie6,7下铜邮，不支持將塊元素轉(zhuǎn)換為inline-block仪召；
3.相對定位-position:relative;
html:
<div class="box">
css:
body{
margin:0;
}
.box{
position: relative;
left: 50%;
top:0;
margin-left: -200px;
width:400px;
height:300px;
background-color: #66ccff;
}
position：relative水平居中.png
元素相對定位之后，根據(jù)自身的初始位置來計算坐標松蒜，左側(cè)增加父級一般的寬度的距離扔茅，此時左邊緣居中；使用margin的負值往左偏移自身一半的寬度秸苗，使其中心點居中咖摹。
Tip：
- 元素相對定位偏移之后仍然占有初始的文檔位置。
4.絕對定位-position:absolute;
html:
<div class="wrap">
<span class="span">這是一個絕對定位的行內(nèi)元素</span>
</div>
css:body{
margin:0;
font-size: 32px;
line-height: 50px;
}
.wrap{
position: relative;
width:100%;
}
.span{
position: absolute;
left: 50%;
top:0;
margin-left: -200px;
width:400px;
height:300px;
background-color: #66ccff;
}
position：absolute水平居中.png
?元素絕對定位之后难述，根據(jù)有定位的父級，來計算自己的坐標吐句，左側(cè)增加父級一般的寬度的距離胁后，此時左邊緣居中；使用margin的負值往左偏移自身一半的寬度嗦枢，使其中心點居中攀芯。
Tip：
- （1）需要給父級添加相對定位；
- （2）元素絕對定位之后脫離文檔流文虏，無法撐開父級的高度侣诺；
5.彈性盒模型的主軸對齊方式-justify-content:center;
html:
<div class="wrap">
<div class="box">彈性盒模型子元素的水平居中</div>
</div>
css:
.wrap{
display: -webkit-box; /*Safari 3.1-6 Android2.3 browser*/
display: -moz-box; /*Firefox 19- */
display: -ms-flexbox; /*IE 10 */
display: -webkit-flex; /*Chrome 21+ */
display: flex;/* 當前標準語法 */
-moz-box-pack: center;
-webkit-box-pack: center;
justify-content: center;
width:100%;
}
.box{
width:500px;
height:300px;
background-color: #66ccff;
}
justify-content：center水平居中.png
元素在主軸的中心，多余空間在主軸的兩側(cè);主軸默認水平方向氧秘，則子元素水平居中年鸳。
Tip：
- 兼容性略差，通常需要有兼容寫法丸相。
demo：https://github.com/MornMartin/layout-center-horizontally
