垂直居中(总结)
在工作中我們經(jīng)常會(huì)遇到垂直居中的情況這里我對(duì)自己常用的垂直居中進(jìn)行了總結(jié)
1、line-height?
僅限單行文本且高度已知的標(biāo)簽使用, 所有樣式先清除 * {maigin:0; padding: 0})
HTML模版代碼:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<article class="SingleLine">
<p>我是單行文本</p>
</article>
</body>
</html>
CSS樣式代碼:
.SingleLine{height: 300px;border: 1px solid red;line-height: 300px; }
2、line-height? 和 vertical-align: middle 結(jié)合實(shí)現(xiàn)?
這個(gè)使用的前提是 子元素要轉(zhuǎn)換為行內(nèi)塊元素, 并且在父元素設(shè)置line-height 之后 子元素要將line-height設(shè)置為默認(rèn)或者根據(jù)實(shí)際情況設(shè)置 但是不能不設(shè)置,如果不設(shè)置那么將會(huì)繼承父元素的 line-height 這樣如果子元素中還有子元素 那么樣式會(huì)有問(wèn)題。為什么要設(shè)置??vertical-align: middle?? 因?yàn)闉g覽器默認(rèn)的?元素放置在父元素的基線上。
HTML模版:(我們先設(shè)置了父元素的line-height)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}.SingleLine{height: 100px;border: 1px solid red;line-height: 100px;}</style> </head> <body><article class="SingleLine"><div class="content"><p>我是第一行</p><P>我是第二行</P></div></article> </body> </html>CSS樣式:
.content {background-color: red;width: 300px;line-height: normal;display: inline-block;vertical-align: middle; }`
這里設(shè)置width:300px 只是為了讓大家更好的看到 如果 不設(shè)置 line-height:normal 會(huì)導(dǎo)致子元素的內(nèi)容超出父元素
效果如下圖:
由上圖可以看出在子元素中如果還有多行子元素那么子元素需要設(shè)置line-height,如果不設(shè)置那么將會(huì)繼承父元素的line-height會(huì)導(dǎo)致頁(yè)面樣式出現(xiàn)問(wèn)題。
這里為什么要轉(zhuǎn)為 inline-block呢？ 因?yàn)関ertical-align只在行內(nèi)塊元素和行內(nèi)元素起作用,
那么設(shè)置vertical-align的作用是什么呢？它的作用是設(shè)置元素的垂直對(duì)齊方式。 默認(rèn)的是元素放置在父元素的基線上，因?yàn)橐獙?shí)現(xiàn)居中所以我們這里要設(shè)置vertical-align: middle，將此元素放置在父元素的中部。
3、通過(guò)Position + transform 實(shí)現(xiàn)
通過(guò)position + transform實(shí)現(xiàn)垂直居中分為以下兩種情況: 1、在不知道父元素高度的時(shí)候可以使用? position:absolute?? 2、在知道父元素高度的時(shí)候可以使用 position:relative?
我們?cè)敿?xì)介紹一下：
1、在不知道父元素高度的時(shí)候可以使用? position:absolute
HTML模版:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}</style> </head> <body><article class="article"><div class="content"><p>我是第一行</p><P>我是第二行</P></div><div><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p><p>我是填充內(nèi)容的</p></div></article> </body> </html>
這里下面添加了一個(gè)div 是為了撐起父元素的高度,因?yàn)檫@里要模擬父元素不確定高度。由于我們要使用postion: absolute, 所以要向父元素添加position:relative
? ? ? CSS樣式:
.article{position: relative;border: 1px solid red; } .content {background-color: red;width: 300px;position: absolute;top: 50%;transform: translateY(-50%); }這里先使用絕對(duì)定位然后設(shè)置top值 50% 這會(huì)使子元素的上邊界位于 父元素的中間 所以要讓子元素整個(gè)位于父元素的中間則使子元素 向上平移 自己高度的一半就可以了
2、在知道父元素高度的時(shí)候可以使用 position:relative?
如果知道父元素的高度,那么我們就可以直接給子元素設(shè)置?position:relative屬性: 具體CSS如下:
.article{height: 500px;border: 1px solid red; } .content {background-color: red;width: 300px;position: relative;top: 50%;transform: translateY(-50%); }
這里子元素設(shè)置相對(duì)定位,然后設(shè)置top:50%，會(huì)導(dǎo)致子元素的上邊界位于 父元素的中間 所以要讓子元素整個(gè)位于父元素的中間則使子元素 向上平移 自己高度的一半就可以了
4、display: table 和?vertical-align: middle 結(jié)合實(shí)現(xiàn)?
這個(gè)的原理類(lèi)似與第2種這里table-cell 將元素設(shè)置成了行內(nèi)塊級(jí)元素 所以可以使用?vertical-align: middle使其居中
HTML模版:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}</style> </head> <body><article class="article"><div class="content"><p>我是第一行</p><P>我是第二行</P></div></article> </body> </html>CSS樣式:
.article{display: table;height: 300px;border: 1px solid red; } .content {display: table-cell;width: 300px;vertical-align: middle; }5、flex(彈性布局)
使用彈性布局需要先將父元素的display設(shè)置為flex, 然后flex提供了 align-items: 屬性 這個(gè)屬性 定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。
所以我們很容易的就可以實(shí)現(xiàn)以下CSS樣式(HTML模版和第4種方案提供的模版一樣,這里就不重復(fù)寫(xiě)了)
.article{display: flex;
align-items: centerheight: 300px;border: 1px solid red; }
這里強(qiáng)調(diào)一下使用 align-items會(huì)將flex容器的所有子項(xiàng)全部設(shè)置為垂直居中, 假如你只想對(duì)一個(gè) 子項(xiàng)設(shè)置 垂直居中可以 直接在該子項(xiàng)上添加 align-self: center 屬性
? ?CSS樣式
.article{display: flex;height: 300px;border: 1px solid red; } .content {align-self: center; }6、grid(網(wǎng)格布局)
grid布局也給我們提供了?align-items 將全部的子項(xiàng)設(shè)置為垂直居中，所以使用起來(lái)也很簡(jiǎn)單
.article{display: grid;border: 1px solid red;align-items: center; }和flex布局一樣 align-items:center 會(huì)將grid容器的所有子項(xiàng)全部設(shè)置為垂直居中，如果你想使個(gè)別子項(xiàng)設(shè)置垂直居中只需要在需要設(shè)置的子項(xiàng)上添加 align-self:center 屬性
.content{align-self: center; }
總結(jié)
以上是我對(duì)垂直方式的幾種方式的簡(jiǎn)單說(shuō)明,可以看出使用目前流行的flex、grid布局實(shí)現(xiàn)起來(lái)很簡(jiǎn)單但是他們的兼容性不是很好,使用的使用一定要考慮兼容性問(wèn)題。line-height的兩種方式也可以實(shí)現(xiàn)垂直居中但是局限性很大, table-cell 也可以實(shí)現(xiàn)但是目前table布局也慢慢的被棄用,所以個(gè)人感覺(jué)使用position和transform 是很好的選擇, 但是如果不考慮兼容性問(wèn)題那么使用flex或者grid更為便捷。
轉(zhuǎn)載于:https://www.cnblogs.com/webtaotao/p/11049631.html
總結(jié)
- 上一篇： niginx高性能原因
- 下一篇： 每日一题