有在做網頁排版的朋友應該會看到過不少垂直置中的CSS,事實上方法真的很多,以下整理出常見的垂直置中的方法,本文以區塊(div等)為主,如果想知道行內元素(span等)中的內容如何垂置中請參考:CSS 讓行內元素垂直置中或置頂、置底的方法
- flex(彈性排版)-- 推薦
- line-height(文字行高)-- 推薦
- table(表格排版)
- padding(內距控制)
- margin(外距控制)
- translateY(Y軸控制)
- vertical-align(垂直對齊)
flex(彈性排版)
單個區塊內容
flex是彈性的意思,align-items是對齊物件的意思,只要兩行即可將區塊內容垂直置中,適用大部分需求,是目前最推薦的用法,不過如果有多個區塊內容會並排成同一行,如果是這樣請把它們包進一個 div 再對那個 div 設定即可。
display: flex; /* 彈性排版 */
align-items: center; /* 對齊物件:中間 */
實際操作
See the Pen vertical center flex CSS by kumo (@kumo-tw) on CodePen.
多個區塊內容
剛剛用align-items: center的缺點是如果有多個區塊元素會並排在一起,如果要讓元素以區塊方式換行,也可以改用以下CSS。
display: flex; /* 彈性排版 */
flex-direction: column; /* 彈性方向:列(縱向) */
justify-content: center; /* 版面內容:中間 */
See the Pen vertical center flex justify CSS by kumo (@kumo-tw) on CodePen.
line-height(文字行高)
line-height是常見的一種用法,當文字行高與區塊高度同高時,其文字就會呈現垂直置中的效果,但如果有多個區塊內容,則其他區塊會被擠出去。
/* 高度與行高需相同 */
height: 100px; /* 設置高度 */
line-height: 100px; /* 文字行高 */
實際操作
See the Pen vertical center line-height CSS by kumo (@kumo-tw) on CodePen.
table(表格排版)
由於表格具有垂直置中的功能,因此把區塊設定為表格排版即可做到垂直置中,但如果有多個區塊元素會並排在一起。
.box {
display: table; /* 表格排版 */
height: 150px; /* 設置高度 */
}
.box div, .box p {
display: table-cell; /* 儲存格 */
vertical-align: middle; /* 垂直物件:中間 */
border:1px dotted #ddd; /* 格線參考 */
}
實際操作
See the Pen vertical center table CSS by kumo (@kumo-tw) on CodePen.
padding(內距控制)
padding是內距的意思,就是區塊內框邊與文字之間的距離,透過padding的設定同樣可以達到垂直置中的效果。原理是把上下的內距設為相同的任意數字,由於距離上方跟距離下方是相同的,因此內容就會垂直置中了,而左右的內距可視自己的需求調整。
padding: 75px 0; /* 內距:上下75 左右0 */
實際操作
See the Pen vertical center padding CSS by kumo (@kumo-tw) on CodePen.
margin(外距控制)
透過margin外距控制一樣可以達到垂直置中,原理跟padding類似,只是它是用外距來控制上下距離。缺點是無法用於多個元素,如果有多個元素請另外包在一個元素內,但垂直置中的是區塊本身,如果又要讓區塊裡面三行文字垂直置中需要另外再設定,如果是這樣不如一開始就用 flex 等方式。
.box {
position: relative; /* 相對位置 */
height: 150px; /* 設置高度 */
}
.content {
position: absolute; /* 絕對設置 */
top: 0; /* 距離頂部 */
bottom: 0; /* 距離底部 */
margin: auto; /* 外距:自動 */
height: 100px; /* 設置高度 */
}
實際操作
See the Pen vertical center position margin CSS by kumo (@kumo-tw) on CodePen.
translateY(Y軸控制)
先用相對與絕對位置控制元素垂直置中,由於這時候元素是以頂部為置中,因此實際上會比中間再往下一點,因此要再用 translateY 來上移元素的一半,如此便垂直置中了。缺點是無法用於有多個元素內容,如果有多個元素內容請再統一包在同一個元素中,然後控制那個元素即可。
.box {
position: relative; /* 相對位置 */
height: 150px; /* 設置高度 */
}
.content {
position: absolute; /* 絕對位置 */
top: 50%; /* 距離頂部 */
transform: translateY(-50%); /* 調整Y軸 */
}
實際操作
See the Pen vertical center position CSS by kumo (@kumo-tw) on CodePen.
vertical-align(垂直對齊)
此方法比較複雜,要先做:before偽元素,將它撐到與元素同高,再將裡面元素設為垂直置中。
.box {
height: 150px; /* 設置高度 */
}
.box:before {
content: ''; /* 內容:置空即可 */
height: 100%; /* 高度:須為100% */
display: inline-block; /* 行內元素 */
vertical-align: middle; /* 垂直物件:中間 */
width: 5px; /* 供參考原理用,可移除 */
background-color: red; /* 供參考原理用,可移除 */
}
.content {
display: inline-block; /* 行內元素 */
vertical-align: middle; /* 垂直物件:中間 */
}
實際操作
See the Pen vertical center inline-block CSS by kumo (@kumo-tw) on CodePen.
以上就是區塊元素的垂直置中的各種方法,如果想知道行內元素(span等)中的內容如何垂置中請參考:CSS 讓行內元素垂直置中或置頂、置底的方法