鐵人檔案
網頁設計中最常被問到的就是如何做到版面的垂直置中了，雖然這是100%會在網頁設計時遇到的問題，但仍舊有許多的設計師被打敗在設計的路上，這次就讓我們每天一篇來學習各式各樣的網頁垂直置中技巧吧。
簡言 這個技巧利用了 Top: 50% 的招式，讓你的物件上方能產生固定％數的距離，接著讓要置中的物件本身使用 tranlateY 的％數來達成垂直置中的需求，...
簡言 「什麼！這也算垂直置中技巧？連我阿嬤都知道這方式吧？！！」 對的！這的確也算是一種垂直置中的方式，不可諱言的這方式真的是簡單過頭了，以至於有些開發者認為這...
簡言 這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上...
簡言 這個方式...沒甚麼好講的，就是一個很單純的用表格來做垂直置中，應該算是初初初初初級垂直置中技巧啦。 原理說明 去看這篇 使用 Display: tabl...
簡言 這個方式跟之前的一個方式很相似，但只是利用上下包夾的偽元素包夾我們的內容物件來達成垂直置中的目的。 原理說明 使用 Flex 的時候我們可以利用 flex...
講了這麼多垂直置中... 從一開始鐵人賽開賽以來，Amos寫了 25種這麼多的垂直置中技巧，但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機，今天我們就來看...
RWD等比例 目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區...
支援度最高的垂直置中方式 左圖右文版面的垂直置中應該是最常見到的一種需求了，這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片，這種畫面基本上通常在樣版網站可...
數位生態 蓋板廣告太常見到了，目前幾乎人手多機的情況下，我們每天幾乎都離不開上網這行為，上網除了上班用電腦以外，幾乎都是用行動裝置上網了，也就經常會看到蓋版廣告...
老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧，其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式，只是有些概念頗...
