有在做網頁排版的朋友應該會看到過不少垂直置中的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 讓行內元素垂直置中或置頂、置底的方法