CSS置中方法你知道幾種?利用元素置中做個relax app吧! (30 Days challenge-10)

前言

今天的主題一樣非常的簡單,同樣是利用vanilla.js做的小專案,但裡面用到的置中方式我認為值得提出來分享一下。前陣子跟朋友聊天時,他有提到面試官曾經問他:若今天要用CSS語法將元素置中,有哪些方法可用? 雖然是個非常基礎的問題,但我思考後發現能達成的手段有非常多,值得特別紀錄一下:D

專案說明

是一個非常簡單的呼吸、吐氣的應用程式,基本週期我設為7.5秒,其中包含3秒的吸氣、1.5秒憋氣以及3秒的吐氣,隨著不同的動作圓圈會有相應的變化。比較特別的地方在於置中的方式以及style部分用了conic-gradient做出了還不錯的外框效果!

專案預覽

專案連結

github :https://github.com/windate3411/relax-app
demo 頁面: https://xenodochial-almeida-d770fb.netlify.com/

CSS置中

接著進入今天的另一個主題,CSS的置中方式! 以下我列出我自己比較常用且常見的手法,若是有遺漏的可以再補充讓我知道~!

方法一:flex ,justify-content and align-items

很常見的方法之一!在父層設定就可以搞定一切的作法! 詳細可見以下demo。

方法二:flex , and margin auto auto

一樣是相當簡單的作法,利用margin的特點讓元素達成水平&垂直置中,注意父層還是要設為flex才能達成這樣的效果!

方法三:position absolute and translate

這個方法就比較少見一些,但還是非常有意思。translate這個屬性是指2D方向的偏移,當你利用position absolute去推50%的時候,你會發現元素並不是在正中央,這時候你就必須靠translate去修正這樣的偏移,一樣看一下下方的範例。

結語

當然!你也是可以依照元素的大小用margin去慢慢推,或是使用grid system配合offset去做置中的效果。有很多很多不同的方法都能做到置中,就看你個人習慣囉:D

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s