雖然使用 CSS 創建居中效果需要耍一些花招，特別是垂直居中效果，但我認為由此生出的詆毀，對于 CSS 則是不公平的。實際上我們有太多的方式使用 CSS 創建居中效果了，而且作為一名前端開發者，你真的有必要對其中的原理了解一二。

寫這篇文章的目的不是為了向各位解釋這些方法的工作原理，而是介紹將這些方法編寫為 Sass mixin 的方式，繼而將它們復用到各類項目中。

總體概述

本文將會專注于解決子元素居中于父類容器的問題，就實踐經驗來說，這也是最常使用到的居中效果。當你請教別人 CSS 中和居中效果相關的問題時，他們往往會反問你：你知道元素具體的寬高嗎？之所以會有這樣的反問，是因為如果知道元素的寬高，那么最好的解決方案就是使用 CSS transform 屬性。雖然該屬性在瀏覽器中的支持度稍低，但卻有著高度靈活的特性；如果因為瀏覽器兼容性令你不能使用 CSS transform 屬性，或者也不知道元素的寬高，那么實現居中效果的最簡單方法就是使用負向 margin。

我們今天要創建的 Sass mixin 就是基于上述的方法：將元素的左上角絕對定位到容器的中心位置，然后為 mixin 添加兩個可選參數，分別代表元素的寬高，如果傳遞了參數，那么就使用負向 margin 的方法實現居中；如果沒有傳遞參數，就使用 CSS transform 的方法。

當我們的 Sass mixin 創建成功后，基本的使用方式如下所示：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表