核心要點(diǎn)

• CSS中的居中，特別是垂直居中，可能很棘手。 Sass可以將各種CSS居中方法封裝到一個(gè)易於使用的mixin中。
• 居中方法取決於元素尺寸是否已知。如果未知，則使用CSS轉(zhuǎn)換以提高靈活性；如果已知，則使用負(fù)邊距。 Sass mixin將元素的左上角定位在容器的中間，然後將其向後移動(dòng)其寬度和高度的一半。
• 可以通過(guò)包含@supports規(guī)則來(lái)檢查CSS轉(zhuǎn)換支持，或?qū)?shù)進(jìn)行更嚴(yán)格的檢查以確保它們是寬度和高度的有效值，從而進(jìn)一步改進(jìn)mixin。
• Flexbox是將元素在其父元素中居中的另一種解決方案。如果條件允許，它更容易使用。 Flexbox通過(guò)在父元素上設(shè)置三個(gè)屬性來(lái)居中子元素。

CSS居中一直以來(lái)都是一項(xiàng)繁瑣的任務(wù)，甚至成為該語(yǔ)言的一個(gè)笑柄，導(dǎo)致諸如“我們成功地將宇航員送上月球，但我們無(wú)法在CSS中進(jìn)行垂直對(duì)齊”之類(lèi)的笑話。

雖然CSS在處理居中，特別是垂直居中時(shí)確實(shí)有點(diǎn)棘手，但我認(rèn)為這些笑話有點(diǎn)不公平。實(shí)際上，CSS中有很多方法可以居中內(nèi)容，你只需要知道如何去做。

本文並非旨在解釋這些方法的工作原理，而是說(shuō)明如何將它們封裝在Sass mixin中以方便易用。因此，如果您對(duì)CSS居中感到有些不舒服，我建議您事先閱讀一些資源：

• 如何在CSS中居中
• CSS居中：完整指南

準(zhǔn)備好了嗎？讓我們開(kāi)始吧。

概述

首先，我們將重點(diǎn)關(guān)注將元素在其父元素中居中，因?yàn)檫@是絕對(duì)居中最常見(jiàn)的用例（模態(tài)框、部分內(nèi)容等）。當(dāng)您詢(xún)問(wèn)某人關(guān)於CSS居中的問(wèn)題時(shí)，通常得到的回復(fù)是：您知道元素的尺寸嗎？ 原因是，如果您不知道元素尺寸，最佳解決方案是依賴(lài)CSS轉(zhuǎn)換。這會(huì)稍微降低瀏覽器支持度，但它非常靈活。如果您無(wú)法使用CSS轉(zhuǎn)換或知道元素的寬度和高度，那麼很容易依賴(lài)負(fù)邊距。

因此，我們的mixin將基本上執(zhí)行以下操作：將元素的左上角絕對(duì)定位在容器的中間，然後根據(jù)是否將尺寸傳遞給mixin，使用CSS轉(zhuǎn)換或負(fù)邊距將其向後移動(dòng)其寬度和高度的一半。無(wú)尺寸：使用轉(zhuǎn)換；有尺寸：使用邊距。

然後您可以像這樣使用它：

<code>/**
 * 為子元素啟用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 沒(méi)有將尺寸傳遞給mixin，因此它依賴(lài)于CSS轉(zhuǎn)換
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸使用負(fù)邊距，對(duì)垂直軸使用CSS轉(zhuǎn)換
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將高度傳遞給mixin，因此我們對(duì)垂直軸使用負(fù)邊距，對(duì)水平軸使用CSS轉(zhuǎn)換
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸和垂直軸都使用負(fù)邊距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

編譯後，它應(yīng)該輸出以下內(nèi)容：

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

好的，這看起來(lái)有點(diǎn)冗長(zhǎng)，但請(qǐng)記住，此輸出僅用於演示目的。在給定情況下，您不太可能發(fā)現(xiàn)自己同時(shí)使用所有這些方法。

構(gòu)建mixin

好的，讓我們深入研究。從之前的代碼片段中，我們已經(jīng)知道m(xù)ixin的簽名：它有兩個(gè)可選參數(shù)，$width和$height。

<code>/**
 * 為子元素啟用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 沒(méi)有將尺寸傳遞給mixin，因此它依賴(lài)于CSS轉(zhuǎn)換
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸使用負(fù)邊距，對(duì)垂直軸使用CSS轉(zhuǎn)換
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將高度傳遞給mixin，因此我們對(duì)垂直軸使用負(fù)邊距，對(duì)水平軸使用CSS轉(zhuǎn)換
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸和垂直軸都使用負(fù)邊距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

繼續(xù)。在任何情況下，mixin都需要使元素絕對(duì)定位，因此我們可以從這一點(diǎn)開(kāi)始。

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

我們將必須巧妙地編寫(xiě)代碼。讓我們?cè)谶@裡暫停一下，分析一下我們擁有的不同選項(xiàng)：

讓我們用這個(gè)。

<code>/**
 * 為子元素啟用位置上下文
 */
.parent {
  position: relative;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 沒(méi)有將尺寸傳遞給mixin，因此它依賴(lài)于CSS轉(zhuǎn)換
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸使用負(fù)邊距，對(duì)垂直軸使用CSS轉(zhuǎn)換
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將高度傳遞給mixin，因此我們對(duì)垂直軸使用負(fù)邊距，對(duì)水平軸使用CSS轉(zhuǎn)換
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 將元素在其父元素中絕對(duì)居中
 * 將寬度傳遞給mixin，因此我們對(duì)水平軸和垂直軸都使用負(fù)邊距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

現(xiàn)在我們已經(jīng)為mixin設(shè)置了框架，我們只需要用實(shí)際的CSS聲明來(lái)填補(bǔ)空白。

<code>.parent {
  position: relative;
}

.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  transform: translateY(-50%);
}

.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -200px;
  height: 400px;
}

.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  margin-top: -200px;
  height: 400px;
}</code>

注意：#{0 0}技巧是一個(gè)不太乾淨(jìng)的技巧，用於防止Sass進(jìn)行稍微過(guò)於激進(jìn)的壓縮，這會(huì)導(dǎo)致margin: mt 0 ml而不是margin: mt 0 0 ml

到目前為止，一切順利。

更進(jìn)一步

我們可以做幾件事來(lái)進(jìn)一步改進(jìn)我們的mixin，例如在mixin中包含一個(gè)@supports規(guī)則來(lái)檢查CSS轉(zhuǎn)換支持，或者假設(shè)存在（或允許）Modernizr並根據(jù)是否支持CSS轉(zhuǎn)換來(lái)輸出條件樣式。我們還可以對(duì)參數(shù)進(jìn)行更嚴(yán)格的檢查，以確保它們是寬度和高度的有效值。

但是，您必須問(wèn)自己，這樣做是否是一件好事。 mixin本身的循環(huán)複雜度已經(jīng)達(dá)到6，對(duì)於Sass輔助函數(shù)來(lái)說(shuō)已經(jīng)相當(dāng)多了。它仍然可以接受，但是向其中添加更多代碼可能會(huì)導(dǎo)致循環(huán)複雜度進(jìn)一步增加。

Flexbox怎麼樣？

我很確定你們中的一些人正在座位上跳躍，思考我們?nèi)绾问褂肍lexbox將元素在其父元素中居中。確實(shí)，這是可能的，而且事實(shí)證明，如果條件允許，這是所有解決方案中最簡(jiǎn)單的。

我們剛剛設(shè)置的解決方案和Flexbox解決方案之間的主要區(qū)別在於，後者建立在父元素之上，而前者主要關(guān)注子元素（前提是它的任何祖先的位置都不同於static）。

為了使元素使其子元素居中，您只需要設(shè)置三個(gè)屬性。您可以為此創(chuàng)建一個(gè)mixin、佔(zhàn)位符、類(lèi)或任何您喜歡的元素。

<code>/// 在其父元素中水平、垂直或絕對(duì)居中元素
/// 如果指定，此mixin將根據(jù)元素的尺寸使用負(fù)邊距。否則，它將依賴(lài)于CSS轉(zhuǎn)換，CSS轉(zhuǎn)換的瀏覽器支持度較低，但由于它們與尺寸無(wú)關(guān)，因此更靈活。
///
/// @author Kitty Giraudel
///
/// @param {Length | null} $width [null] - 元素寬度
/// @param {Length | null} $height [null] - 元素高度
///
@mixin center($width: null, $height: null) { .. }</code>

假設(shè)您添加了相關(guān)的供應(yīng)商前綴（通過(guò)mixin或Autoprefixer），此解決方案應(yīng)該在許多瀏覽器中“正常工作”。

<code>@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  // 更多魔法在這里...
}</code>

正如您肯定猜到的那樣，它會(huì)產(chǎn)生：

<code>@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  @if not $width and not $height {
    // 使用 `translate`
  } @else if $width and $height {
    // 使用 `margin`
  } @else if not $height {
    // 使用 `margin-left` 和 `translateY`
  } @else {
    // 使用 `margin-top` 和 `translateX`
  }
}</code>

最終想法

我們想要一個(gè)簡(jiǎn)短的mixin來(lái)輕鬆地將元素在其父元素中居中；這個(gè)mixin可以完成這項(xiàng)工作，而且做得很好。它不僅足夠聰明，無(wú)論元素是否具有特定尺寸都能工作，而且還提供了一個(gè)友好且直觀的API，這非常重要。

通過(guò)查看代碼，任何人都可以立即理解@include center行是包含一個(gè)輔助函數(shù)，該輔助函數(shù)執(zhí)行一些邏輯以使元素在其父元素中居中。但是請(qǐng)記住，為了使此方法有效，後者（或DOM樹(shù)中的任何父元素）必須具有不同於static的位置！ ;)

您可以在SassMeister上使用此代碼：http://www.miracleart.cn/link/780bc6caf343bb06a4372c0821012624。

(由於篇幅限制，此處省略了FAQs部分。 FAQs部分內(nèi)容與文章內(nèi)容高度重複，可以根據(jù)需要自行添加或修改。)

以上是以薩斯為中心的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！