欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

收羅CSS布局中有關(guān)水平和垂直居中的N種方法

  發(fā)布時(shí)間：2014-05-08 15:33:10   作者：佚名   我要評(píng)論
這篇文章主要收羅了CSS布局中有關(guān)水平和垂直居中的N種方法，個(gè)人感覺(jué)是相當(dāng)不錯(cuò)，需要的朋友可以參考下
最近開(kāi)始倒回來(lái)看看CSS這塊兒有什么不太了解的地方需要鞏固！呵，好家伙！一番折騰之后我發(fā)現(xiàn)還真有很多不太了解的。真是學(xué)無(wú)止境啊...CK說(shuō)網(wǎng)上有很大概15種可以讓CSS元素居中的方法。Oh,賣(mài)糕的！這是逼我查資料到夜晚兩點(diǎn)的節(jié)奏么？

閑話(huà)休體，現(xiàn)在我們來(lái)進(jìn)入正題咯：

先來(lái)說(shuō)說(shuō)水平居中。

CSS水平居中的方法:

1、最常見(jiàn)的margin方法：

給元素設(shè)置一個(gè)顯示式的寬度，然后加上margin的左右值為auto，示例：

復(fù)制代碼
代碼如下:

<!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>

上面這個(gè)是有帶有寬度的div塊。如果是沒(méi)有設(shè)置的div塊，我們還可以這樣設(shè)置，exp:

復(fù)制代碼
代碼如下:

.center {
margin: 0 auto;
}

如此這般！就可以了！

0表示設(shè)置元素center的上下外邊距為0。

優(yōu)點(diǎn)：實(shí)現(xiàn)方法簡(jiǎn)單易懂，瀏覽器兼容性極強(qiáng)；
缺點(diǎn)：擴(kuò)展性差，無(wú)法自適應(yīng)未知項(xiàng)狀況，而且容易出現(xiàn)元素?cái)D壓的情形

2、text-again：center

這是大家都很熟悉并且經(jīng)常使用到的文本居中。簡(jiǎn)單、快捷，暴力、方便。缺點(diǎn)就是只能用于文本
還是做個(gè)例子：

復(fù)制代碼
代碼如下:

.center{
border: 1px solid maroon;
width: 200px;
text-align: center;
height: 100px;
}
<div class="center">
這里是文本
</div>

第二種就醬紫了。

3、使用inline-block 和 text-again 使塊級(jí)元素居中的方法：

復(fù)制代碼
代碼如下:

<span style="font-weight: normal;"> .pagination {
text-align: center;
}
.center {
display: inline-block;
zoom: 1;
}
t;div class="pagination">
<div class="center">
這里是文本
</div>
t;/div></span>

使用該方法的關(guān)鍵點(diǎn)在于需要在元素的父級(jí)元素中設(shè)置text-center屬性為center

這中方法簡(jiǎn)單，擴(kuò)展性強(qiáng)。缺點(diǎn)就是要解決inline-block的兼容的問(wèn)題。

4、利用浮動(dòng)的包裹性和相對(duì)定位的百分比數(shù)據(jù)值特性，傳說(shuō)稱(chēng)之為“相對(duì)浮動(dòng)”：

這里我給大家做個(gè)例子大家就都明白了.

復(fù)制代碼
代碼如下:

<span style="font-weight: normal;"><span style="white-space:pre"> </span>.pagination {
<span style="white-space:pre"> </span>float: left;
<span style="white-space:pre"> </span>position: relative;
<span style="white-space:pre"> </span>left: 50%;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.center {
<span style="white-space:pre"> </span>float: left;
<span style="white-space:pre"> </span>position: relative;
<span style="white-space:pre"> </span>right: 50%;
<span style="white-space:pre"> </span>}</span>

通過(guò)給父元素設(shè)置浮動(dòng)float和相對(duì)定位在向左移動(dòng)50%，再給元素設(shè)置浮動(dòng)float和相對(duì)定位并讓其向右移動(dòng)50%來(lái)實(shí)現(xiàn)的水平居中。
優(yōu)點(diǎn)：擴(kuò)展性強(qiáng)，兼容性強(qiáng)；
缺點(diǎn)：使用了浮動(dòng)需要清除，并且該方法理解起來(lái)比較困難。

5、使用絕對(duì)定位和負(fù)邊距居中；

復(fù)制代碼
代碼如下:

<span style="font-weight: normal;"> .center {
position: absolute;
width: 寬度值；
left: 50%;
margin: -(寬度值/2);
}</span>

該方法在不知具體寬度時(shí)并無(wú)法使用，我們可以和方法四結(jié)合起來(lái)：

復(fù)制代碼
代碼如下:

.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)點(diǎn)：擴(kuò)展性強(qiáng)，兼容性強(qiáng)；

缺點(diǎn)：理解起來(lái)較為困難。

6、CSS3的flex（伸縮盒模型）實(shí)現(xiàn)水平居中。

復(fù)制代碼
代碼如下:

.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)點(diǎn)：實(shí)現(xiàn)便捷，擴(kuò)展性強(qiáng)；
缺點(diǎn)：兼容性差。

7、CSS3的fit-content實(shí)現(xiàn)水平居中方法。

復(fù)制代碼
代碼如下:

.pagination ul {
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}

優(yōu)點(diǎn)：簡(jiǎn)單易懂，擴(kuò)展性強(qiáng)；
缺點(diǎn)：瀏覽器兼容性差。

8、利用table元素實(shí)現(xiàn)水平居中。

復(fù)制代碼
代碼如下:

.table-center {
margin: 0 auto;
}

使用table作為容器的方法來(lái)實(shí)現(xiàn)，添加了無(wú)意義的標(biāo)簽。

table標(biāo)簽本身并不是塊級(jí)元素，當(dāng)我們不設(shè)置table的寬度的時(shí)候，table里面的寬度 是由它內(nèi)部的元素的寬度撐起來(lái)的，這樣我們就可以通過(guò)設(shè) 置table水平居中從而使它內(nèi)部的元素居中了。

優(yōu)點(diǎn)：簡(jiǎn)單易懂；
缺點(diǎn)：增加了無(wú)意義的標(biāo)簽。

9、通過(guò)設(shè)計(jì)隱藏的div框來(lái)使顯示的內(nèi)容居中。

復(fù)制代碼
代碼如下:

.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的寬度,因?yàn)樽笥覂蛇卍iv隱藏，所以我們見(jiàn)到的內(nèi)容將居中對(duì)齊；

優(yōu)點(diǎn)：簡(jiǎn)單易懂；
缺點(diǎn)：局限性太大。

10、padding方法。

復(fù)制代碼
代碼如下:

.center {
padding: 15px 200px;
}

使內(nèi)容的左右兩邊有相同的內(nèi)邊距，那么在用戶(hù)眼中的內(nèi)容就是居中對(duì)齊的。

優(yōu)點(diǎn)：簡(jiǎn)單易懂；
缺點(diǎn)：使用時(shí)需要不斷調(diào)試距離，比較麻煩。

CSS垂直居中的方法:

1、行高line-height設(shè)置；

復(fù)制代碼
代碼如下:

.center {
height: 50px;
line-height: 50px;
}

使用行高line-height設(shè)置垂直居中只需要使行高和元素高度一樣即可。

優(yōu)點(diǎn)：使用方便，簡(jiǎn)單易懂；
缺點(diǎn)：元素內(nèi)內(nèi)容只能是文本和圖片，而且文本和圖片不能共存，不然效果差到惡心。

2、絕對(duì)定位和負(fù)邊距是元素垂直居中。

復(fù)制代碼
代碼如下:

.center {
position: absolute;
top: 50%;
height: 高度值;
margin: -(高度值/2);
}

優(yōu)點(diǎn)：結(jié)果簡(jiǎn)單明了，使用方便；
缺點(diǎn)：由于固定高度，當(dāng)文本內(nèi)容超過(guò)限制時(shí)，將出現(xiàn)不可預(yù)料的情況。

3、使用display：table-cell 和 vertical-align 使元素垂直居中

復(fù)制代碼
代碼如下:

.center {
display:table-cell; /*讓元素以表格的單元素格形式渲染*/
vertical-align: middle; /*使用元素的垂直對(duì)齊*/
}

優(yōu)點(diǎn)：適用范圍廣，簡(jiǎn)單易懂；
缺點(diǎn)：兼容性問(wèn)題。

4、使用padding讓元素內(nèi)容垂直居中。

復(fù)制代碼
代碼如下:

.center {
padding: 30px 10px;
}

不給容器固定高度，并在容器上下設(shè)置相同的padding值。

優(yōu)點(diǎn)：簡(jiǎn)單易懂，結(jié)構(gòu)清晰，并且兼容所有瀏覽器；
缺點(diǎn)：不能給容器固定高度。

相關(guān)文章

最新評(píng)論