up
down
Close
架站盒子
Web Development Box
 

CSS 區塊元素(div)垂直置中的方法

│ 3699 Views │ CSS
CSS 區塊元素(div)垂直置中的方法
CSS 區塊元素(div)垂直置中的方法

有在做網頁排版的朋友應該會看到過不少垂直置中的CSS,事實上方法真的很多,以下整理出常見的垂直置中的方法,本文以區塊(div等)為主,如果想知道行內元素(span等)中的內容如何垂置中請參考:CSS 讓行內元素垂直置中或置頂、置底的方法

  1. flex(彈性排版)-- 推薦
  2. line-height(文字行高)-- 推薦
  3. table(表格排版)
  4. padding(內距控制)
  5. margin(外距控制)
  6. translateY(Y軸控制)
  7. 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 讓行內元素垂直置中或置頂、置底的方法

延伸閱讀

本文是否對您有幫助?