5種方式實現CSS元素水平居中,實用又簡單!
阿新 • • 發佈:2018-12-29
1.常規方法 - 定寬元素
html部分:
<div class="container">
<div class="center"></div>
</container>
CSS部分:
/*公用*/
body,div{
margin: 0;
}
.container{
background: beige;
height: 1000px;
}
/*居中*/
.center{
width:300px;
height:300px;
margin:auto;
background: aqua;
}
此方法缺點:內層元素必須設定(固定)寬度
2.不定寬元素 - 設定行內塊
然而很多時候,我們並不知道需要居中元素的寬度,或者其寬度是隨後臺數據變化的。
下文開始,我們以“分頁效果”為例,詮釋“不固定寬度”的元素如何設定水平居中:
html部分(外層div.container略): <div class="pages"> <li><</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>></li> </div> CSS部分(前文公用部分略): /*分頁公用*/ li{ list-style-type: none; width: 25px; height: 25px; text-align: center; line-height: 25px; background: black; color: #fff; border-radius: 3px; cursor: pointer; } li:hover{ background: darkorange; } /*設定行內塊*/ .pages{ margin-top: 20px; text-align: center; } .pages li{ display: inline-block; }
此方法缺點:需要解決inline-block帶來的預設間距(瀏覽器自動設定)
3.不定寬元素 - 設定浮動
用浮動的辦法,即可避開瀏覽器帶來的inline-block預設間距
思路:
1.外層相對定位,內層相對定位
2.外層左浮動,內層左浮動
3.外層右移50%,內層左移50%
html部分不變,為避免重複class改為pages2,後文同理 CSS部分: .pages2{ position: relative; float: left; //外層左浮 -> 內層寬度剛好撐開外層容器 left: 50%; //外層右移50% } .pages2 li{ float: left; position: relative; right: 50%; //內層左移50% } .pages2 li:not(:first-child){ margin-left:5px; }
注:外層元素一旦設定float屬性,內層將自動剛好撐開外層寬度,等同於為外層設定display: inline-block;
4.不定寬元素 - 絕對定位
思路:
1.外層絕對定位,內層相對定位,外層的外層相對定位
2.外層左浮動,內層左浮動
3.外層右移50%,內層左移50%
CSS部分:
.container{
position: relative; //外層的外層相對定位
}
.pages3{
position: absolute; //外層絕對定位
float: left;
left: 50%;
}
.pages3 li{
float: left;
position: relative; //內層相對定位
right: 50%;
}
.pages3 li:not(:first-child){
margin-left:5px;
}
5.CSS新特性 - fit-content
CSS3新特性width: fit-content,只需配合margin: auto,即可巧妙將元素水平居中
(fit-content目前僅支援谷歌和火狐瀏覽器,但非常適合移動端開發!)
.pages4{
width: fit-content;
width:-moz-fit-content;
margin:auto;
}
.pages4 li{
float: left;
}
.pages4 li:not(:first-child){
margin-left:5px;
}