CSS垂直置中技巧

1. Line-height

適用情境：單行文字垂直置中技巧

這個方式應該是最多人知道的了，常見於單行文字的應用，像是按鈕這一類物件，或者是選單、導覽列此類物件最常見到此方式了。此方式的原理是在於將單行文字的行高設定後，文字會位於行高的垂直中間位置，利用此原理就能輕鬆達成垂直置中的需求了。

HTML

XHTML

1	<div class="content">Lorem ipsam.</div>

CSS

.content{

width: 400px;

background: #ccc;

line-height:100px;

margin: auto;

}

你也可以直接到我的 codepen 來看使用 Line-height 達到垂直置中

2. Line-height + inline-block

適用情境：多物件的垂直置中技巧

既然可以使用第一種方式對「行物件」達成垂直置中的話，當然沒有理由不能做到多行啊！但是你需要將多個物件或多行物件當成一個「行」物件來看待，所以我們必須要將這些資料多包一層，並將其設定為 inline-block，並在該 inline-block物件的外層物件使用line-height來替代 height 的設定，如此便可以達成垂直置中的目的囉，縱使你的資料是包含了標題跟內文在內也可以正常的垂直置中喔。

HTML

XHTML

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

border: 1px solid #f00;

margin: auto;

line-height: 200px;

text-align: center;

}

.box2 .content{

display: inline-block;

height: auto;

line-height:1;

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 line-height + inline-block 多行垂直置中方式

3. :before + inline-block

適用情境：多物件的CSS垂直置中技巧

:before 偽類物件搭配 inline-block 屬性的寫法應該是很傳統的垂直置中技巧了，此方式的好處在於子層置中物件可以不需要特別設定高度，我們利用將 :before 偽類物件設定為 100% 高的 inline-block，再搭配上將需要置中的子物件同樣設定成 inline-block 性質後，就能使用 vertical-align: middle 來達到垂直置中的目的了，此方式在以往其實是個非常棒的垂直置中解決方案，唯獨需要特別處理掉 inline-block物件之間的4-5px空間這個小缺點，但也很實用了。

HTML

XHTML

<h2>3.:before + inline-block</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

text-align: center;

}

.box::before{

content:'';

display: inline-block;

height: 100%;

width: 0;

vertical-align: middle;

}

.box .content{

width: 400px;

background: #ccc;

display: inline-block;

vertical-align: middle;

}

你也可以直接到我的 codepen 來看 :before + inline-block 垂直置中方式

4. absolute + margin負值

適用情境：多行文字的垂直置中技巧

誰說絕對定位要少用的？Amos 認為沒有少用多用的問題，重點在於你是否有「妥善運用」才是重點，絕對定位在這個例子中會設定 top: 50% 來抓取空間高度的 50%，接著再將置中物件的 marign-top 設定為負一半的高度，這樣就能讓物件置中啦，此方法可是自古以來流傳了多年的置中方式呢！

HTML

XHTML

<h2>4.absolute + margin 負值</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

position: relative;

}

.box4 .content{

width: 400px;

background: #ccc;

height: 70px;

position: absolute;

top:50%;

left: 50%;

margin-left: -200px;

margin-top: -35px;

}

你也可以直接到我的 codepen 來看 absolute + margin 負值的垂直置中方式

5. absolute + margin auto

適用情境：多行文字的垂直置中技巧

絕對定位的垂直置中又一個，這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但當你設定了 top: 0; bottom: 0 時，絕對定位物件就抓到可運用的空間了，這時你的 margin: auto 就生效了(神奇吧)，如果你的絕對定位物件需要水平置中於父層，那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍，再讓 margin-left 與 margin-right 設定為 auto 即可置中。但此方式的缺點是你的定位物件必須有固定的寬高（％數也可）才能正常置中。

HTML

XHTML

<h2>5.absolute + translate(-50%, -50%)</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

position: relative;

}

.content{

width: 400px;

background: #ccc;

height: 70px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

你也可以直接到我的 codepen 來看 absolute + margin: auto 垂直置中方式

6. absolute + translate

適用情境：多行文字的垂直置中技巧

再一個絕對定位置中的方式，此方式應該算是最方便的了，因為此置中的定位物件不需要固定的寬跟高，我們利用絕對定位時的 left 跟 top 設定物件的上方跟左方各都為 50% ，再利用 translate(-50%, -50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。（CSS3 好棒棒！！）

HTML

XHTML

<h2>6.absolute + margin: auto</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

position: relative;

}

.box5 .content{

width: 400px;

background: #ccc;

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%, -50%);

}

你也可以直接到我的 codepen 來看 absolute + translate(-50%, -50%) 垂直置中方式

7. Flex + align-items

適用情境：多行文字的垂直置中技巧

Flex ! 前端的毒品！後端的寶物！這東西自從面世之後就不斷的考驗網頁教學者的良心，到底要不要拋棄 float 擁抱 flex，我想這答案人人心中自有一把尺，但先碰 Flex 再碰 Float 可謂先甘後苦，這順序到底要倒吃甘蔗還是正吃甘蔗實在難說，自從有了 Flex 之後，小孩考試一百分，設計網頁不跑版，客戶網頁都RWD，老闆爽賺好開心，我也加薪加班好甘幹心，不由的說 Flex 真的是一個神物，我們只要設定父層 display: flex 以及設定次軸(cross axis)置中屬性 align-items: center 就好了（講那麼多結果重點就一行字是哪招啦），這個方式的優點是此層不需設定高度即可自動置中，且原始碼乾淨無比，真的是用一次就讓你升天啦。

HTML

<h2>7.Flex + align-items</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: flex;

justify-content: center;

align-items: center;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Flex + align-items 垂直置中方式

8. Flex + :before + flex-grow

適用情境：多行文字的垂直置中技巧

Flex 有多種方式可以讓你把資料置中，使用 Flex-grow 的延展特性來達成，這個例子中 Amos 使用了 flex-direction: column 直式排法，搭配 :before 偽元素使用 flex-grow 伸展值能夠取得剩下所有空間的特性，把他設定成一半的剩餘空間就能做到把內容資料準確的推到垂直中間位置，算是個傳統技法的延伸方式。（這樣的話上面第七個方式不是比較快？）

HTML

XHTML

<h2>8.Flex + before + flex-grow</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: flex;

flex-direction: column;

align-items: center;

}

.box:before{

content: '';

flex-grow: .5;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Flex + before + flex-grow 垂直置中方式

9. Flex + margin

適用情境：多行文字的垂直置中技巧

繼續用 Flex 來置中，由於 Flex 物件對空間解讀的特殊性，我們只要在父層物件設定 display: flex，接著在需要垂直置中的物件上設定 margin: auto 即可自動置中囉。

HTML

XHTML

<h2>9.Flex + margin</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: flex;

}

.content{

width: 400px;

background: #ccc;

margin: auto;

}

你也可以直接到我的 codepen 來看 Flex + margin 垂直置中方式

10. Flex + align-self

適用情境：多行文字的垂直置中技巧

align-self 應該大家都不陌生，基本上就是對 flex 次軸(cross axis)的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成垂直置中的目的了。

HTML

XHTML

<h2>10.Flex + align-self</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: flex;

justify-content: center;

}

.content{

width: 400px;

background: #ccc;

align-self: center

}

你也可以直接到我的 codepen 來看 Flex + align-self 垂直置中方式

11. Flex + align-content

適用情境：多行文字的垂直置中技巧

在正常的狀況下，align-conent 僅能對次軸多行 flex item 做置中，但是當我今天子層物件不確定有多少個時，且有時可能會有單個的情況出現的話，此技巧就能用到了（當然你也能其他解法），既然是多行子物件才能用，那我們就為單個子物件多加兩個兄弟吧，使用 :before 以及 :after 來讓子物件增加到多個，這樣就能使用 flex 的 align-content 屬性來置中囉。

HTML

XHTML

<h2>11.Flex + align-content</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-content: center;

}

.content{

width: 400px;

background: #ccc;

}

.box11:before,

.box11:after{

content: '';

display: block;

width:100%;

}

你也可以直接到我的 codepen 來看 Flex + align-content 垂直置中方式

12. Grid + template

適用情境：多行文字的垂直置中技巧

CSS grid 最令人驚豔的就是這個 template 的功能了，簡直就是把區塊當畫布在使用一般，我們僅需要把樣板設定成三列，就能搞定垂直置中啦。

HTML

XHTML

<h2>12.Grid + template</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

grid-template-rows: 1fr auto 1fr;

grid-template-columns: 1fr auto 1fr;

grid-template-areas:

'. . .'

'. amos .'

'. . .';

}

.content{

width: 400px;

background: #ccc;

grid-area: amos;

}

你也可以直接到我的 codepen 來看 Grid + template 垂直置中方式

13. Grid + align-items

適用情境：多行文字的垂直置中技巧

align-items 不僅是 Flex 可用，連 CSS grid 也擁有此屬性可使用，但在 Flex 中 align-items 是針對次軸(cross axis)作對齊，而在 CSS Grid 中則是針對Ｙ軸作對齊，你可以把他想像成是表格中儲存格的 vertical-align 屬性看待，就可以很容易理解了。

HTML

XHTML

<h2>13.Grid + align-items</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

justify-content: center;

align-items: center;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Grid + align-items 垂直置中方式

14. Grid + align-content

適用情境：多行文字的垂直置中技巧

CSS grid 的 align-content 跟 Flex 的 align-content 有點差異，CSS grid 對於空間的解釋會跟 Flex 有一些些的落差，所以導致 align-content 在 Flex 中僅能針對多行物件有作用，但在 Grid 中就沒這問題了，所以我們可以很開心的使用 align-content 來對子項物件做垂直置中，私毫不費力氣喔。

HTML

XHTML

<h2>14.Grid + align-content</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

justify-content: center;

align-content: center;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Grid + align-content 垂直置中方式

15. Grid + align-self

適用情境：多行文字的垂直置中技巧

align-self 應該大家都不陌生，基本上就是對 grid Y軸的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成垂直置中的目的了。

HTML

XHTML

<h2>15.Grid + align-self</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

justify-content: center;

}

.content{

width: 400px;

background: #ccc;

align-self: center;

}

你也可以直接到我的 codepen 來看 Grid + align-self 垂直置中方式

16. Grid + place-items

適用情境：多行文字的垂直置中技巧

place-items 這屬性不知道有多少人用過，此屬性是 align-items 與 justify-items 的縮寫，簡單的說就是水平跟垂直的對齊方式，想當然的，設定 center 就能置中囉。

HTML

XHTML

<h2>16.Grid + place-items</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

height: 150px;

margin: 0 auto;

place-items: center;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Grid + place-items 垂直置中方式

17. Grid + place-content

適用情境：多行文字的垂直置中技巧

place-content 這屬性不知道有多少人用過，此屬性是 align-content 與 justify-content 的縮寫，簡單的說就是水平跟垂直的對齊方式，想當然的，設定 center 就能置中囉。

HTML

XHTML

<h2>17.Grid + place-content</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

height: 150px;

margin: 0 auto;

place-content: center;

}

.content{

width: 400px;

background: #ccc;

}

你也可以直接到我的 codepen 來看 Grid + place-content 的垂直置中方式

18. Grid + margin

適用情境：多行文字的垂直置中技巧

繼續用 Grid 來置中，由於 Grid 物件對空間解讀的特殊性，我們只要在父層物件設定 display: grid，接著在需要垂直置中的物件上設定 margin: auto 即可自動置中囉。（咦？這描述怎似曾相似）

HTML

XHTML

<h2>18.Grid + margin</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

display: grid;

}

.content{

width: 400px;

background: #ccc;

margin:auto;

}

你也可以直接到我的 codepen 來看 Grid + margin 垂直置中方式

19. Display: table-cell

適用情境：多行文字的垂直置中技巧

這一招我想有點年紀的開者應該都有看過了，當然像我這麼嫩的開發者當然是第一次看到啦（這是什麼幹話），這一招的原理在於使用 CSS display 屬性將div設定成表格的儲存格，這樣就能利用支援儲存格垂直對齊的 vertical-align 屬性來將資料垂直置中啦。

HTML

XHTML

<h2>19.display: table-cell</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

text-align: center;

display: table-cell;

vertical-align: middle;

}

.content{

width: 400px;

background: #ccc;

margin: auto;

}

你也可以直接到我的 codepen 來看 display: table-cell 垂直置中方式

20. calc

適用情境：多行文字的垂直置中技巧

Calc 是計算機英文單字「calculator」的縮寫，這個由微軟提出的CSS方法，真的是網頁開發的一大福音啊！我們竟然可以在網頁中直接做計算！？這真是太猛啦，從此我們再也不用在那邊絞盡腦汁的計算數學，或是想辦法用 JavaScript 來動態計算，我們可以很輕鬆的利用 calc() 這個「計算機」方法，來將百分比即時且動態的計算出實際要的什麼高度，真可謂劃時代的一個方法啊！但這個方法需要注意的是太過大量的使用的話，網頁效能會是比較差的，所以請審慎使用喔。

HTML

XHTML

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

}

.content{

width: 400px;

background: #ccc;

position: relative;

top:calc((100% - 70px) / 2);

margin:auto;

height: 70px;

}

你也可以直接到我的 codepen 來看 calc 垂直置中方式

21. Relative + translateY

適用情境：多行文字的垂直置中技巧

這個技巧利用了 Top: 50% 的招式，讓你的物件上方能產生固定％數的距離，接著讓要置中的物件本身使用 tranlateY 的％數來達成垂直置中的需求，tranlate 是一個很棒的屬性，由於 tranlate 的百分比單位是利用物件自身的尺寸作為 100% ，這樣讓我們要利用物件自身寬高做事變得方便很多呢！

HTML

XHTML

<h2>21.relative + translateY(-50%)</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

}

.content{

width: 400px;

background: #ccc;

position: relative;

top: 50%;

transform: translateY(-50%);

margin: auto;

}

你也可以直接到我的 codepen 來看 relative + translateY(-50%) 垂直置中方式

22. Padding

適用情境：多行文字的垂直置中技巧

「什麼！這也算垂直置中技巧？連我阿嬤都知道這方式吧？！！」

對的！這的確也算是一種垂直置中的方式，不可諱言的這方式真的是簡單過頭了，以至於有些開發者認為這種方式不能算是一種垂直置中技巧，但同樣的你無法反駁的是，我的資料的確垂直置中啦XDDD，好啦！就當我硬凹吧，你說的都對！好不！？(被打)

HTML

XHTML

<h2>22.padding</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

border: 1px solid #f00;

margin: auto;

height: auto;

padding: 50px 0;

}

.content{

width: 400px;

background: #ccc;

margin: auto;

}

你也可以直接到我的 codepen 來看使用 padding 垂直置中

23. Writing-mode

適用情境：多行文字的垂直置中技巧

這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個CSS屬性的功能基本上跟垂直置中是八竿子打不上關係，它的用途是改變文字書寫的方向從橫書變直書，且支援度從很早期的IE5就有支援了，但當時Amos鮮少使用，一來是網頁多是橫書居多，另外當時除了ＩＥ瀏覽器以外，其他瀏覽器的支援度似乎都不太好，也就很少使用了。

使用 writing-mode 將一整個文字容器變成直書，接著將此容器利用 text-align: center 來達到垂直置中的目的，白話一點的解說的話，就是你把原本橫排的文字，變成直排了，所以原本橫排用到的水平對齊中間(text-align: center)，就變成了控制直排的中間了（垂直置中），原理就是這麼簡單。但要特別注意的是瀏覽器對此語法的支援來說，需要拆開寫法才行，不然某些瀏覽器吃的語法不同，可能會讓你的網頁在某些瀏覽器上看起來無效，這會是最需要注意到的。

HTML

XHTML

<h2>23.writing-mode</h2>

立馬來看 Amos 實際完成的

CSS3精美相簿效果

</a>

效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！

這個置中的想法來自於 Paul

</div>

CSS

h2{

text-align: center;

}

.box{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

writing-mode: tb-lr; /* for ie11 */

writing-mode: vertical-lr;

text-align: center;

margin:0 auto;

}

.content{

width: 400px;

background: #ccc;

display: inline-block; /* for ie & edge */

width: 100%;

writing-mode: lr-tb;

margin: auto;

text-align: left;

}

.box .txt{

width: 80%;

margin: auto;

}

你也可以直接到我的 codepen 來看使用 writing-mode 達到垂直置中方式

1. Line-height

2. Line-height + inline-block

3. :before + inline-block

4. absolute + margin負值

5. absolute + margin auto

6. absolute + translate

7. Flex + align-items

8. Flex + :before + flex-grow

9. Flex + margin

10. Flex + align-self

11. Flex + align-content

12. Grid + template

13. Grid + align-items

14. Grid + align-content

15. Grid + align-self

16. Grid + place-items

17. Grid + place-content

18. Grid + margin

19. Display: table-cell

20. calc

21. Relative + translateY

22. Padding

23. Writing-mode

猜你喜欢