垂直居中(总结)
在工作中我們經常會遇到垂直居中的情況這里我對自己常用的垂直居中進行了總結
1、line-height?
僅限單行文本且高度已知的標簽使用, 所有樣式先清除 * {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 結合實現?
這個使用的前提是 子元素要轉換為行內塊元素, 并且在父元素設置line-height 之后 子元素要將line-height設置為默認或者根據實際情況設置 但是不能不設置,如果不設置那么將會繼承父元素的 line-height 這樣如果子元素中還有子元素 那么樣式會有問題。為什么要設置??vertical-align: middle?? 因為瀏覽器默認的?元素放置在父元素的基線上。
HTML模版:(我們先設置了父元素的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; }`
這里設置width:300px 只是為了讓大家更好的看到 如果 不設置 line-height:normal 會導致子元素的內容超出父元素
效果如下圖:
由上圖可以看出在子元素中如果還有多行子元素那么子元素需要設置line-height,如果不設置那么將會繼承父元素的line-height會導致頁面樣式出現問題。
這里為什么要轉為 inline-block呢？ 因為vertical-align只在行內塊元素和行內元素起作用,
那么設置vertical-align的作用是什么呢？它的作用是設置元素的垂直對齊方式。 默認的是元素放置在父元素的基線上，因為要實現居中所以我們這里要設置vertical-align: middle，將此元素放置在父元素的中部。
3、通過Position + transform 實現
通過position + transform實現垂直居中分為以下兩種情況: 1、在不知道父元素高度的時候可以使用? position:absolute?? 2、在知道父元素高度的時候可以使用 position:relative?
我們詳細介紹一下：
1、在不知道父元素高度的時候可以使用? 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>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p><p>我是填充內容的</p></div></article> </body> </html>
這里下面添加了一個div 是為了撐起父元素的高度,因為這里要模擬父元素不確定高度。由于我們要使用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%); }這里先使用絕對定位然后設置top值 50% 這會使子元素的上邊界位于 父元素的中間 所以要讓子元素整個位于父元素的中間則使子元素 向上平移 自己高度的一半就可以了
2、在知道父元素高度的時候可以使用 position:relative?
如果知道父元素的高度,那么我們就可以直接給子元素設置?position:relative屬性: 具體CSS如下:
.article{height: 500px;border: 1px solid red; } .content {background-color: red;width: 300px;position: relative;top: 50%;transform: translateY(-50%); }
這里子元素設置相對定位,然后設置top:50%，會導致子元素的上邊界位于 父元素的中間 所以要讓子元素整個位于父元素的中間則使子元素 向上平移 自己高度的一半就可以了
4、display: table 和?vertical-align: middle 結合實現?
這個的原理類似與第2種這里table-cell 將元素設置成了行內塊級元素 所以可以使用?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設置為flex, 然后flex提供了 align-items: 屬性 這個屬性 定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
所以我們很容易的就可以實現以下CSS樣式(HTML模版和第4種方案提供的模版一樣,這里就不重復寫了)
.article{display: flex;
align-items: centerheight: 300px;border: 1px solid red; }
這里強調一下使用 align-items會將flex容器的所有子項全部設置為垂直居中, 假如你只想對一個 子項設置 垂直居中可以 直接在該子項上添加 align-self: center 屬性
? ?CSS樣式
.article{display: flex;height: 300px;border: 1px solid red; } .content {align-self: center; }6、grid(網格布局)
grid布局也給我們提供了?align-items 將全部的子項設置為垂直居中，所以使用起來也很簡單
.article{display: grid;border: 1px solid red;align-items: center; }和flex布局一樣 align-items:center 會將grid容器的所有子項全部設置為垂直居中，如果你想使個別子項設置垂直居中只需要在需要設置的子項上添加 align-self:center 屬性
.content{align-self: center; }
總結
以上是我對垂直方式的幾種方式的簡單說明,可以看出使用目前流行的flex、grid布局實現起來很簡單但是他們的兼容性不是很好,使用的使用一定要考慮兼容性問題。line-height的兩種方式也可以實現垂直居中但是局限性很大, table-cell 也可以實現但是目前table布局也慢慢的被棄用,所以個人感覺使用position和transform 是很好的選擇, 但是如果不考慮兼容性問題那么使用flex或者grid更為便捷。
轉載于:https://www.cnblogs.com/webtaotao/p/11049631.html
總結
- 上一篇： niginx高性能原因
- 下一篇： 办理马来西亚延期留学需要缴纳费用吗