嗨~ 歡迎閱讀 ExplainThis 全端開發雙週報,這期的主題會聊聊前端面試中,很常見的 CSS 元素置中問題。
在正式進到主題前,想分享一下,上週 ExplainThis 團隊跟 GreatFrontend 的負責人 Yangshun Tay 交流想法,假如你還不知道 Yangshun 的話,他是前 Meta 主任工程師,也是著名的 Blind75 的作者。
近年來他專注在前端工程的領域,辭去在 Meta 的工作後,全職做 GreatFrontend,協助前端開發者在前端領域成長。聽到 Yangshun 分享對於 GreatFrontend 的願景,讓人感到非常敬佩,如果你對於從實作中練習前端開發、前端面試,非常推薦可以逛逛 GreatFrontend 的網站 (連結),裡面有許多免費的優質內容。
ExplainThis 籌劃的 E+ 過去一直有舉辦程式面試練習打卡群 (例如 LeetCode、前端手寫題),未來我們也會透過 GreatFrontend 上的免費題目,來舉辦 UI 實作的打卡群,有興趣的讀者請在密切關注 (E+ 的詳細介紹可以見此 https://www.explainthis.io/zh-hant/e-plus)
用 CSS 置中元素的 5 種方式
如何用 CSS 置中一個元素,是不論實務工作或面試,都經常會遇到的問題。先前 Josh Comeau 寫了一篇《The Ultimate Guide to Centering in CSS》 當中提到了多種可以透過 CSS 來置中元素的方式,這期雙週報就來帶大家一起回顧這個工作常用到、面試也常考的 CSS 置中問題。
關於這題,ExplainThis ,過去也有寫一詳解,這次我們也順道更新那篇,成為更完整的版本,要準備那提的讀者可以參考 (連結)
透過 margin
來置中
第一種置中方式,是透過 margin
來做到,概念是把元素的 margin-left
跟 margin-right
都設定成 auto
,這樣意味著,會把左邊與右邊都有的空間都變成 margin
,這樣就會把元素往正中間擠。注意,這邊要搭配 max-width: fit-content
來確保元素的水平會固定在元素的寬度,不會往水平拉長。
.element {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
另外 CSS 有一個 margin-inline
可以使用,它會等同於同時設定 margin-left
與 margin-left
,因此上面的 CSS 可以改寫成下面這樣
.element {
max-width: fit-content;
margin-inline: auto;
}
透過 flexbox
第二個置中的做法是透過 flexbox
,這也是最常見的方法之一。與上面作法不同的地方在於,CSS 的設置會是在父元素 (也就是容器),而不是元素本身。在把容器設定成 flex
後,可以進一步透過 justify-content: center
來做水平置中,然後透過 align-items: center
來做垂直置中。
.container {
display: flex;
justify-content: center;
align-items: center;
}
在瀏覽器視窗置中
上面的兩種做法,都是針對元素與其父元素,但假如今天想直接在瀏覽器視窗的可視範圍置中,例如常見的固定在瀏覽器某個位置的橫幅 (banner),可以用以下方法
.element {
position: fixed;
inset: 0px;
margin: auto;
}
透過 position: fixed
我們可以將元素固定在視窗中,而 inset: 0px
則是設定上下左右都為 0
,這樣會把整個元素拉到全畫面,這時候再搭配 margin: auto
就能讓元素置中。
透過 grid
來置中
在 CSS 排版時,除了 flexbox
,grid
也是經常會用到的。與 flexbox
不同的點是,grid
直接用 place-content: center
即可做到置中。
.container {
display: grid;
place-content: center;
}
事實上, place-content
是 justify-content
與 align-content
的結合。然而,如果你想堆疊多個元素,並且讓它們都同時置中,則需要額外加上 place-items: center
置中文字
最後,如果想要讓元素中的文字置中,可簡單地透過 text-align: center
來做到。
[本期推薦]
相信做現代軟體開發的人,多數都用過 Git,也知道 Git 是 Linus Torvalds 的第二代表作,但是你知道 Git 背後的故事嗎?今天看到社群廣傳這篇《Git 的故事:這一次沒這麼好玩》,只能說寫的太精彩了,不推說不過去 (連結)
社群中知名的工具 ray.so 開源了,ray.so 系列工具中最有名的是可以製作程式碼美圖的 Code Images。看了 Code Images 的開源程式碼,覺得非常推薦想加強前端能力的人,可以讀這個開源程式碼庫 (連結)
ElevenLabs 推出免費的 iOS Reader。主打可以讓你貼上一個網址、上傳某個文件,或者輸入一段文字,然後由 AI 唸給你聽。身為長時間用眼的軟體工程師,這個 App 可說是眼睛的救星 (連結)
因為產品全球化,以及目前各類法規因素 (例如 GDPR),目前想開發全球性產品的團隊,都需要往多區域的方向走,最近 Linear 團隊分享《How we built multi-region support for Linear》 分享了他們怎麼做這件事 (連結)
大家都知道 JavaScript 這個程式語言,當時是基於 Netscape 這款瀏覽器的需求而開發。Netscape 創辦人最近回憶了當年創辦 Netscape 的經過,很精彩的歷史推薦一看 (連結)
不少前端框架採用 Virtual DOM 的機制,然而具體來說該如何實現Virtual DOM? 這篇《Virtual DOM in 200 lines of JavaScript》用 200 行程式碼寫了一個簡易的版本 (連結)
最近一位日本的工程師,上線了一個他做的視覺化工具,讓你可以理解在 React 觸發渲染後,背後究竟發生了什麼事情。假如想好好了解 React Fiber,以及現在大家在談的 Concurrent React,或是單純想了解 React 的渲染機制,都很推搭配這個工具 (連結)
前陣子 Magic UI 的開發者,做了一個新的開源線上履歷模版,不僅做的好看,改完內容後,讓你一鍵就可以完成部署,無痛完成自己的線上履歷 (連結)。順道一提,如果你有找新工作的打算,想要有人幫忙給履歷回饋,歡迎加入 E+,有專門的履歷回饋區,最近好幾位有在回饋區詢問回饋的讀者,都拿到不錯的工作 (連結)