Core points

• Centing in CSS, especially vertical centering, can be tricky. Sass can encapsulate various CSS centering methods into an easy-to-use mixin.
• The centering method depends on whether the element size is known. If unknown, use CSS transformation for increased flexibility; if known, use negative margins. The Sass mixin positions the upper left corner of the element in the middle of the container and moves it backwards half of its width and height.
• Mixin can be further improved by including @supports rules to check CSS conversion support, or by performing stricter checks on parameters to ensure they are valid values ??of width and height.
• Flexbox is another solution to center an element in its parent element. It is easier to use if conditions permit. Flexbox centers child elements by setting three attributes on the parent element.

Centering CSS has always been a tedious task and has even become a joke in the language, leading to jokes like "We successfully sent astronauts to the moon, but we can't align vertically in CSS" .

While CSS is indeed a bit tricky when dealing with centering, especially vertically centering, I think these jokes are a bit unfair. Actually, there are many ways to center content in CSS, you just need to know how to do it.

This article is not intended to explain how these methods work, but to illustrate how they are encapsulated in Sass mixin for ease of use. So if you feel a little uncomfortable with CSS centering, I suggest you read some resources in advance:

• How to center in CSS
• CSS Centered: Complete Guide

Are you ready? Let's get started.

Overview

First, we will focus on centering the element in its parent element, as this is the most common use case for absolute centering (modal boxes, parts, etc.). When you ask someone about CSS centering, the usual responses you get are: Do you know the size of the element? The reason is that if you don't know the element size, the best solution is to rely on CSS conversion. This will slightly reduce browser support, but it is very flexible. If you can't use CSS conversion or know the width and height of an element, it's easy to rely on negative margins.

So our mixin will basically do the following: position the upper left corner of the element absolutely in the middle of the container, and then move it backwards with a CSS conversion or negative margin depending on whether the size is passed to the mixin or not, move it backwards its width using CSS conversion or negative margins depending on whether the size is passed to the mixin. and half of height. No size: Use conversion; with size: Use margins.

Then you can use it like this:

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

After compilation, it should output the following:

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

OK, this looks a bit verbose, but remember that this output is for demonstration purposes only. In a given case, it is unlikely that you will find yourself using all of these methods at the same time.

Build mixin

Okay, let's dig deeper. From the previous code snippet, we already know the signature of mixin: it has two optional parameters, $width and $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>

Continue. In any case, mixin requires absolute positioning of elements, so we can start from this point.

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

We will have to write the code cleverly. Let's pause here and analyze the different options we have:

寬度	高度	解決方案
未定義	未定義	translate
定義	定義	margin
定義	未定義	margin-left translateY
未定義	定義	translateX margin-top

Let's use this.

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

Now that we have set up the framework for mixin, we just need to fill in the gaps with the actual CSS declaration.

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

Note: #{0 0} Skill is a not-so-clean technique used to prevent Sass from performing slightly overly aggressive compression, which can cause margin: mt 0 ml rather than margin: mt 0 0 ml

So far, everything went well.

Go a step further

We can do several things to further improve our mixin, such as including a

rule in the mixin to check CSS conversion support, or assume that Modernizr exists (or allows) and outputs conditional styles based on whether CSS conversion is supported or not . We can also perform stricter checks on parameters to ensure they are valid values ??of width and height. @supports

However, you have to ask yourself whether doing so is a good thing. The loop complexity of mixin itself has reached 6, which is quite a lot for Sass helper functions. It's still acceptable, but adding more code to it may lead to a further increase in loop complexity.

How about Flexbox?

I'm pretty sure some of you are jumping in the seat, thinking about how we can use Flexbox to center an element in its parent element. Indeed, this is possible, and it turns out that if conditions permit, this is the easiest of all solutions.

The main difference between the solution we just set up and the Flexbox solution is that the latter is built on the parent element, while the former focuses on the child element (provided that any of its ancestors are positioned differently than static).

In order for an element to center its child elements, you only need to set three properties. You can create a mixin, placeholder, class, or any element you like for this.

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

Assuming you have added the relevant vendor prefix (via mixin or Autoprefixer), this solution should "work properly" in many browsers.

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

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

As you must have guessed, it produces:

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

Final Thoughts

We want a short mixin to easily center the element in its parent; this mixin does the job and does a good job. Not only is it smart enough to work regardless of whether the element has a specific size or not, it also provides a friendly and intuitive API, which is very important.

By looking at the code, anyone can immediately understand that the

line is containing a helper function that performs some logic to center the element in its parent element. But remember that in order for this method to work, the latter (or any parent element in the DOM tree) must have a different position than static! ;)@include center

You can use this code on SassMeister:

http://www.miracleart.cn/link/780bc6caf343bb06a4372c0821012624.

(Due to space limitations, the FAQs part is omitted here. The content of the FAQs part is highly duplicated from the article content, and can be added or modified by yourself as needed.)

The above is the detailed content of Centering With Sass. For more information, please follow other related articles on the PHP Chinese website!