技術 使用 Flex + align-items 做垂直置中

簡言 Flex ! 前端的毒品！後端的寶物！這東西自從面世之後就不斷的考驗網頁教學者的良心，到底要不要拋棄 float 擁抱 flex，我想這答案人人心中自有一...

技術 使用 absolute + margin auto 來達到CSS垂直置中效果

簡言 絕對定位的垂直置中又一個，這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但...

達標好文 技術 鐵人賽第一天開播，節目預告

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 追蹤 Amos 收好康資訊 Line搜尋「@csscoke」加入CSS可樂公開帳號...

技術 使用CSS line-height + inline-block 做多行文字的垂直置中

簡言 既然可以使用第一種方式對「行物件(inline) 」達成垂直置中的話，當然沒有理由不能做到多行啊！但是你需要將多個物件或多行物件當成一個「行」物件來看待，...

技術 使用CSS ::before + inline-block 屬性來達到垂直置中

簡言 這是一個歷史最悠久的垂直置中方式了，支援度達到IE6+，這個方式基本上非常的符合垂直對齊的字面上意思，他是真的讓兩個物件之間做到垂直對齊。我們使用 :be...

技術 使用 Grid + align-items 製作垂直置中區塊

簡言 align-items 不僅是 Flex 可用，連 CSS grid 也擁有此屬性可使用，但在 Flex 中 align-items 是針對次軸(cros...

達標好文 技術 使用CSS Line-height 做垂直置中

簡言 這個方式應該是最多人知道的了，其實這符合資料垂直置中而非垂直對齊，常見於單行文字的應用，像是按鈕這一類物件，或者是選單、導覽列此類物件最常見到此方式了。此...

技術 使用 Flex + margin 輕鬆垂直置中

簡言 繼續用 Flex 來置中，由於 Flex 物件對空間解讀的特殊性，我們只要在父層物件設定 display: flex，接著在需要垂直置中的物件上設定 ma...

技術 使用 absolute + margin負值來達到垂直置中的目的

簡言 誰說絕對定位(position: absolute)要少用的？Amos 認為沒有少用多用的問題，重點在於你是否有「妥善運用」才是重點，絕對定位在這個例子中...

技術 使用 Flex + align-self 做垂直置中

簡言 align-self 應該大家都不陌生，基本上就是對 flex 次軸(cross axis)的個別對齊方式，只要對單一子層物件設定 align-self:...

技術 使用 Flex + align-content 來製作垂直置中

簡言 在正常的狀況下，align-conent 僅能對次軸多行 flex item 做置中，但是當我今天子層物件不確定有多少個時，且有時可能會有單個的情況出現的...

技術 使用 Flex + :before + flex-grow 做垂直置中

簡言 Flex 有多種方式可以讓你把資料置中，使用 Flex-grow 的延展特性來達成，這個例子中 Amos 使用了 flex-direction: colu...

技術 使用 Grid + template 做垂直置中

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