溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS布局中有關(guān)水平和垂直居中的方法總結(jié)”，在日常操作中，相信很多人在CSS布局中有關(guān)水平和垂直居中的方法總結(jié)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS布局中有關(guān)水平和垂直居中的方法總結(jié)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
先來說說水平居中。
CSS水平居中的方法:
1、最常見的margin方法：
給元素設(shè)置一個顯示式的寬度，然后加上margin的左右值為auto，示例：
代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="center">
</div>
</body>
</html>
上面這個是有帶有寬度的div塊。如果是沒有設(shè)置的div塊，我們還可以這樣設(shè)置，exp:
代碼如下:
.center {
margin: 0 auto;
}
如此這般！就可以了！
0表示設(shè)置元素center的上下外邊距為0。
優(yōu)點：實現(xiàn)方法簡單易懂，瀏覽器兼容性極強；
缺點：擴展性差，無法自適應(yīng)未知項狀況，而且容易出現(xiàn)元素擠壓的情形
2、text-again：center
這是大家都很熟悉并且經(jīng)常使用到的文本居中。簡單、快捷，暴力、方便。缺點就是只能用于文本
還是做個例子：
代碼如下:
.center{
border: 1px solid maroon;
width: 200px;
text-align: center;
height: 100px;
}
<div class="center">
這里是文本
</div>
第二種就醬紫了。
3、使用inline-block 和 text-again 使塊級元素居中的方法：
代碼如下:
<span > .pagination {
text-align: center;
}
.center {
display: inline-block;
zoom: 1;
}
t;div class="pagination">
<div class="center">
這里是文本
</div>
t;/div></span>
使用該方法的關(guān)鍵點在于需要在元素的父級元素中設(shè)置text-center屬性為center
這中方法簡單，擴展性強。缺點就是要解決inline-block的兼容的問題。
4、利用浮動的包裹性和相對定位的百分比數(shù)據(jù)值特性，傳說稱之為“相對浮動”：
這里我給大家做個例子大家就都明白了.
代碼如下:
<span ><span > </span>.pagination {
<span > </span>float: left;
<span > </span>position: relative;
<span > </span>left: 50%;
<span > </span>}
<span > </span>.center {
<span > </span>float: left;
<span > </span>position: relative;
<span > </span>right: 50%;
<span > </span>}</span>
通過給父元素設(shè)置浮動float和相對定位在向左移動50%，再給元素設(shè)置浮動float和相對定位并讓其向右移動50%來實現(xiàn)的水平居中。
優(yōu)點：擴展性強，兼容性強；
缺點：使用了浮動需要清除，并且該方法理解起來比較困難。
5、使用絕對定位和負(fù)邊距居中；
代碼如下:
<span > .center {
position: absolute;
width: 寬度值；
left: 50%;
margin: -(寬度值/2);
}</span>
該方法在不知具體寬度時并無法使用，我們可以和方法四結(jié)合起來：
代碼如下:
.pagination {
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
.pagination ul li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative;
right: 50%;
}
優(yōu)點：擴展性強，兼容性強；
缺點：理解起來較為困難。
6、CSS3的flex（伸縮盒模型）實現(xiàn)水平居中。
代碼如下:
.pagination {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizontal;
box-pack: center;
}
優(yōu)點：實現(xiàn)便捷，擴展性強；
缺點：兼容性差。
7、CSS3的fit-content實現(xiàn)水平居中方法。
代碼如下:
.pagination ul {
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
優(yōu)點：簡單易懂，擴展性強；
缺點：瀏覽器兼容性差。
8、利用table元素實現(xiàn)水平居中。
代碼如下:
.table-center {
margin: 0 auto;
}
使用table作為容器的方法來實現(xiàn)，添加了無意義的標(biāo)簽。
table標(biāo)簽本身并不是塊級元素，當(dāng)我們不設(shè)置table的寬度的時候，table里面的寬度 是由它內(nèi)部的元素的寬度撐起來的，這樣我們就可以通過設(shè) 置table水平居中從而使它內(nèi)部的元素居中了。
優(yōu)點：簡單易懂；
缺點：增加了無意義的標(biāo)簽。
9、通過設(shè)計隱藏的div框來使顯示的內(nèi)容居中。
代碼如下:
.div-left {
display:inline-block;
visibility:hidden;
width:10%;
}
.center {
display:inline-block;
}
.div-right {
display:inline-block;
visibility:hidden;
width:10%;
}
center寬度將自適應(yīng)，左右兩邊邊距均為div的寬度,因為左右兩邊div隱藏，所以我們見到的內(nèi)容將居中對齊；
優(yōu)點：簡單易懂；
缺點：局限性太大。
10、padding方法。
代碼如下:
.center {
padding: 15px 200px;
}
使內(nèi)容的左右兩邊有相同的內(nèi)邊距，那么在用戶眼中的內(nèi)容就是居中對齊的。
優(yōu)點：簡單易懂；
缺點：使用時需要不斷調(diào)試距離，比較麻煩。
CSS垂直居中的方法:
1、行高line-height設(shè)置；
代碼如下:
.center {
height: 50px;
line-height: 50px;
}
使用行高line-height設(shè)置垂直居中只需要使行高和元素高度一樣即可。
優(yōu)點：使用方便，簡單易懂；
缺點：元素內(nèi)內(nèi)容只能是文本和圖片，而且文本和圖片不能共存，不然效果差到惡心。
2、絕對定位和負(fù)邊距是元素垂直居中。
代碼如下:
.center {
position: absolute;
top: 50%;
height: 高度值;
margin: -(高度值/2);
}
優(yōu)點：結(jié)果簡單明了，使用方便；
缺點：由于固定高度，當(dāng)文本內(nèi)容超過限制時，將出現(xiàn)不可預(yù)料的情況。
3、使用display：table-cell 和 vertical-align 使元素垂直居中
代碼如下:
.center {
display:table-cell; /*讓元素以表格的單元素格形式渲染*/
vertical-align: middle; /*使用元素的垂直對齊*/
}
優(yōu)點：適用范圍廣，簡單易懂；
缺點：兼容性問題。
4、使用padding讓元素內(nèi)容垂直居中。
代碼如下:
.center {
padding: 30px 10px;
}
不給容器固定高度，并在容器上下設(shè)置相同的padding值。
優(yōu)點：簡單易懂，結(jié)構(gòu)清晰，并且兼容所有瀏覽器；
缺點：不能給容器固定高度。
到此，關(guān)于“CSS布局中有關(guān)水平和垂直居中的方法總結(jié)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
