RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

2019 iT 邦幫忙鐵人賽

DAY 27

Modern Web

連續30天的超實務網頁設計的垂直置中教學系列第 27 篇

2019鐵人賽垂直置中 css 網頁教學 amos

CSScoke

2018-11-11 03:57:20

3860 瀏覽

分享至

RWD等比例

目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區塊的製作通常我們會使用父層的空間來處理，一種是用padding-bottom或padding-top(二擇一)並搭配百分比的單位來處理，又或者width&height使用vw這個單位來製作。例如我今天需要一個寬高比是二比一的區塊的話，我可能會這樣寫

.amos-box{
    width: 100vw;
    height: 50vw;
}

或者是這樣寫

.amos-box2{
	width: 100%;
	height: 0;
	padding-bottom: 50%;
}

這應該不難理解的吧^^

怎麼垂直置中

有了等比例區塊後，我們要處裡的就是垂直置中的需求了，這邊我們要來看一下上面兩種等比例區塊的寫法，第二種等比例的寫法其實是 Amos 比較常用的，這種等比例的寫法適用於各個區域，但第一種使用vw的寫法就會受限多了。這邊佔時不討論等比例區塊寫法的優劣，先來看一下第二種等比例寫法的問題點。
在第二種寫法中可以看到有一個width:0;的寫法，高度 0!!!!高度0的話我要怎麼去垂直置中阿?
我可以可以在區塊內建構一個內容區塊，像是下面這樣

<div class="amos-box2">
	<div class="text">
		AMOS寫鐵人賽好混，三十天只寫了垂直置中
	</div>
</div>

然後我們先在父層設定相對定位relative，再對子層設定絕對定位absolute搭配上下左右0跟margin:auto;來處理，詳細的規則可以參考「使用 absolute + margin auto 來達到CSS垂直置中效果」，這樣應該很簡單的啦，當然如果你對於只用到一種方式是無法滿足的話，我們也可以多增加一層 div 標籤來讓整個區塊更加彈性，例如以下這樣

<div class="amos-box2">
	<div class="content">
		<div class="text">
			AMOS寫鐵人賽好混，三十天只寫了垂直置中
		</div>
	</div>
</div>

接者設定CSS如下就準備好前置作業了

.amos-box2{
	width: 100%;
	height: 0;
	padding-bottom: 50%;
	position: relative;
}
.amos-box2 .content{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

上述準備動作做好之後，我們就可以利用 25種垂直置中方式來達成我們的需求了。講完了...

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

什麼!你說我這樣寫文章太混了無法接受!? 可是我真的只想混過去阿不行嗎?(立馬被打)
好啦!好啦! 我來講講我個人比較推的幾個垂直置中方式總可以吧，其實有了這樣的結構之後，我們其實真的可以在25種垂直置中方式中挑一個來用，結案! (再次被打!)

依據需求來選擇垂直置中

要支援 IE8

這需求很特別，想必是一個非常念舊的客戶呢! 看到這種客戶就知道，這種客戶一定是個~~食古不化~~重感情的客戶阿，跟他好好培養感情的話，案子一定~~很難結案~~接不完的，所以我們當然要使命必達的去做了，針對IE8我會推薦使用「使用CSS ::before + inline-block 屬性來達到垂直置中」來做垂直置中，這個方式支援度超高，且不管子層有無固定高度都能達到我們的需求。

要支援IE9

這需求也是很特別，想必是一個非常念舊的客戶呢! 看到這種客戶就知道，這種客戶一定是個~~不知長進~~重感情的客戶阿，跟他好好培養感情的話，案子一定做接不完的，所以我們當然要使命必達的去做了，針對IE8我會推薦使用「使用CSS ::before + inline-block 屬性來達到垂直置中」來做垂直置中，這個方式支援度超高，且不管子層有無固定高度都能達到我們的需求。(你根本是複製上面要支援 IE8的那段文字吧你!!!)
不過因為IE9支援的 CSS 屬性比較多了，所以我們能選擇的方式也變多了，以下幾種方式都是 Amos 推薦使用的喔

支援IE10 或更高瀏覽器

這大概是目前比較常見的需求了，IE10對於CSS的支援度更多了，其中最特別的當然就是 flex 這個屬性啦，有了 Flex 之後，人生都變得圓滿了，加班的人生都成了準時下班的人生了~~(但是老闆也給我更多的工作了)~~，既然可以使用 Flex 了，當然我們的選擇就更多了，此時我會推薦使用以下幾種方式來快速達到垂直置中的需求

有沒有發現一堆都是用 Flex 的方式呢，因為這樣的原始碼比較省阿，當初老媽有交待出門在外凡事能省就省(謎之音:好像不是用在這邊吧)。

支援IE11或更高瀏覽器

跟IE10用的差不多，反正IE10可以用的話，IE11一定可以用阿，這邊就別想太多了，那幾招的原始碼夠省了啦

支援 edge 或更高瀏覽器

喔喔喔喔喔喔喔喔喔喔喔喔喔喔喔喔喔喔!看到這裡就興奮起來了，因為看到這個就表示可以用的方法更多啦!基本上只要看到edge的話，那就表示 CSS Grid 的垂直置中方式可以拿來使用了，所以就別想太多了，給他用下去吧，以下幾個方式的原始碼乾淨多，Amos推薦可以使用喔。

偏心啦!你都只講IE，其他瀏覽器都不談

對!我不談其他瀏覽器，如果你因為這個原因來說我偏心的話，我只能說...你嫩你菜你訊咖就算了，但千萬不要這麼直白的表現出來啊!(靠!這句話會不會傷到人啊)
因為其他瀏覽器都會自動更新，且支援度比起IE來說大都好上太多了，所以基本上目前 Amos 所提到的 25種垂直置中方式其他各家瀏覽器大都有支援，所以我們不太需要擔心用了這些垂直置中方式之後會在其瀏覽器出問題，當然行動裝置上面可能需要多一點測試(行動裝置的版本太多不在這邊討論)。