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

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

總體概述

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

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

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

CSS Code復制內容到剪貼板

/**  
 * 為子元素設定定位上下文  
 */  
.parent {   
    position: relative;   
}   
  
/**  
 * 讓子元素絕對居中于父容器  
 * 沒有向 Sass mixin 傳遞參數，使用 CSS transform 屬性實現居中效果  
 */  
.child-with-unknown-dimensions {   
    @include center;   
}   
  
/**  
 * 讓子元素絕對居中于父容器  
 * 向 Sass mixin 傳遞了寬度，所以就使用負向 margin 處理水平位置，  
 * 使用 CSS transform 處理垂直位置   
 */  
.child-with-known-width {   
    @include center(400px);   
}   
  
/**  
 * 讓子元素絕對居中于父容器  
 * 向 Sass mixin 傳遞了高度，所以就使用負向 margin 處理垂直位置，  
 * 使用 CSS transform 處理水平位置