前言
今天的主題一樣非常的簡單,同樣是利用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