核心要點

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

CSS居中一直以來都是一項繁瑣的任務，甚至成為該語言的一個笑柄，導致諸如“我們成功地將宇航員送上月球，但我們無法在CSS中進行垂直對齊”之類的笑話。

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

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

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

準備好了嗎？讓我們開始吧。

概述

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

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

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

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

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

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

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

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

編譯后，它應該輸出以下內(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>

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

構(gòu)建mixin

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

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

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

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

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

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

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

<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>

我們將必須巧妙地編寫代碼。讓我們在這里暫停一下，分析一下我們擁有的不同選項：

讓我們用這個。

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

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

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

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

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

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

<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}技巧是一個不太干凈的技巧，用于防止Sass進行稍微過于激進的壓縮，這會導致margin: mt 0 ml而不是margin: mt 0 0 ml

到目前為止，一切順利。

更進一步

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

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

Flexbox怎么樣？

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

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

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

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

假設您添加了相關的供應商前綴（通過mixin或Autoprefixer），此解決方案應該在許多瀏覽器中“正常工作”。

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

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

正如您肯定猜到的那樣，它會產(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>

最終想法

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

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

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

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

以上是以薩斯為中心的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！