您好,登錄后才能下訂單哦!
這篇文章給大家介紹CSS中怎樣實現(xiàn)水平居中,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
前面的話
水平居中是經(jīng)常遇到的問題??此品椒ㄝ^多,條條大路通羅馬。但系統(tǒng)梳理下,其實都圍繞著幾個思路展開。本文將介紹關于水平居中的4種思路,感興趣的朋友參考下吧!
思路一:在父元素中設置text-align:center實現(xiàn)行內元素水平居中
將子元素的display設置為inline-block,使子元素變成行內元素
[注意]若要兼容IE7-瀏覽器,可使用display:inline;zoom:1;來達到inline-block的效果
CSS Code復制內容到剪貼板
<style> .parent{text-align: center;} .child{display: inline-block;} </style> <div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div>
思路二:在本身元素設置margin: 0 auto實現(xiàn)塊級元素水平居中
【1】將子元素的display為table,使子元素成為塊級元素,同時table還具有包裹性,寬度由內容撐開
[注意]若要兼容IE7-瀏覽器,可把child的結構換成<table class="child">DEMO</table>
<style> .child{ display: table; margin: 0 auto; } </style> <div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div>
【2】若子元素定寬,則可以使用絕對定位的盒模型屬性,實現(xiàn)居中效果;若不設置寬度時,子元素被拉伸
CSS Code復制內容到剪貼板
<style>
.parent{
position: relative;
}
.child{
position: absolute;
left: 0;
rightright: 0;
margin: 0 auto;
width: 50px;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
思路三: 通過絕對定位的偏移屬性實現(xiàn)水平居中
【1】配合translate()位移函數(shù)
translate函數(shù)的百分比是相對于自身寬度的,所以left:50%配合translateX(-50%)可實現(xiàn)居中效果
[注意]IE9-瀏覽器不支持
CSS Code復制內容到剪貼板
<style>
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
transform:translateX(-50%);
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
【2】配合relative
relative的偏移屬性是相對于自身的,因為子元素已經(jīng)被設置為absolute,所以若使用relative,則需要增加一層<div>結構,使其寬度與子元素寬度相同
[注意]該方法全兼容,但是增加了html結構
CSS Code復制內容到剪貼板
<style>
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%;
}
.child{
position: relative;
left: -50%;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>
【3】配合負margin
margin的百分比是相對于包含塊的,所以需要增加一層<div>結構。由于寬度width的默認值是auto,當設置負margin時,width也會隨著變大。所以此時需要定寬處理
[注意]雖然全兼容,但需要增加頁面結構及定寬處理,所以限制了應用場景
CSS Code復制內容到剪貼板
<style>
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%;
}
.child{
width:50px;
margin-left:-50%;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>
思路四: 使用彈性盒模型flex實現(xiàn)水平居中
[注意]IE9-瀏覽器不支持
【1】在伸縮容器上設置主軸對齊方式jusify-content:center
CSS Code復制內容到剪貼板
<style>
.parent{
display: flex;
justify-content: center;
}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
【2】在伸縮項目上設置margin: 0 auto
CSS Code復制內容到剪貼板
<style>
.parent{display: flex;}
.child{margin: 0 auto;}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
關于CSS中怎樣實現(xiàn)水平居中就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。