Centrer avec Sass

Points de base

• Le cent dans le CSS, en particulier le centrage vertical, peut être délicat. Le SASS peut encapsuler diverses méthodes de centrage CSS dans un mélange facile à utiliser.
• La méthode de centrage dépend de savoir si la taille de l'élément est connue. Si vous êtes inconnu, utilisez la transformation CSS pour une flexibilité accrue; si elle est connue, utilisez des marges négatives. Le mélange Sass positionne le coin supérieur gauche de l'élément au milieu du récipient et le fait reculer la moitié de sa largeur et de sa hauteur.
• Le mixin peut être encore amélioré en incluant les règles @supports pour vérifier la prise en charge de la conversion CSS, ou en effectuant des vérifications plus strictes sur les paramètres pour s'assurer qu'ils sont des valeurs valides de largeur et de hauteur.
• Flexbox est une autre solution pour centrer un élément de son élément parent. Il est plus facile à utiliser si les conditions le permettent. Flexbox centre les éléments enfants en définissant trois attributs sur l'élément parent.

Centering CSS a toujours été une tâche fastidieuse et est même devenu une blague dans la langue, conduisant à des blagues comme "nous avons réussi à envoyer des astronautes à la lune, mais nous ne pouvons pas nous aligner verticalement dans CSS".

Bien que CSS soit en effet un peu délicat lorsqu'il s'agit de centrer, en particulier de centrer verticalement, je pense que ces blagues sont un peu injustes. En fait, il existe de nombreuses façons de centrer le contenu dans CSS, il vous suffit de savoir comment le faire.

Cet article n'est pas destiné à expliquer comment ces méthodes fonctionnent, mais pour illustrer comment elles sont encapsulées dans Sass Mixin pour faciliter l'utilisation. Donc, si vous vous sentez un peu mal à l'aise avec le centrage CSS, je vous suggère de lire des ressources à l'avance:

• comment centrer dans CSS
• CSS centré: Guide complet

Êtes-vous prêt? Commençons.

Présentation

Tout d'abord, nous nous concentrerons sur le centre de l'élément de son élément parent, car il s'agit du cas d'utilisation le plus courant pour le centrage absolu (boîtes modales, pièces, etc.). Lorsque vous interrogez à quelqu'un le centre du CSS, les réponses habituelles que vous obtenez sont: Connaissez-vous la taille de l'élément? La raison en est que si vous ne connaissez pas la taille de l'élément, la meilleure solution consiste à compter sur la conversion CSS. Cela réduira légèrement le support du navigateur, mais il est très flexible. Si vous ne pouvez pas utiliser la conversion CSS ou connaître la largeur et la hauteur d'un élément, il est facile de compter sur des marges négatives.

Ainsi, notre mixin fera essentiellement ce qui suit: positionnez le coin supérieur gauche de l'élément absolument au milieu du récipient, puis déplacez-le en arrière avec une conversion CSS ou une marge négative selon que la taille est passée au mélange Ou non, déplacez-le en arrière en arrière en utilisant la conversion CSS ou les marges négatives selon que la taille est passée au mélange. Aucune taille: utilisez la conversion; avec des marges.

Ensuite, vous pouvez l'utiliser comme ceci:

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

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

Après la compilation, il doit sortir les éléments suivants:

<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, cela semble un peu verbeux, mais n'oubliez pas que cette sortie est à des fins de démonstration uniquement. Dans un cas donné, il est peu probable que vous vous retrouviez à utiliser toutes ces méthodes en même temps.

Build mixin

D'accord, creuons plus profondément. De l'extrait de code précédent, nous connaissons déjà la signature de Mixin: il a deux paramètres facultatifs, $width et $height.

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

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

Continuez. Dans tous les cas, le mixin nécessite un positionnement absolu des éléments, nous pouvons donc commencer à partir de ce 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>

Nous devrons écrire le code intelligemment. Arrêtons-nous ici et analysons les différentes options dont nous disposons:

宽度	高度	解决方案
未定义	未定义	translate
定义	定义	margin
定义	未定义	margin-left translateY
未定义	定义	translateX margin-top

utilisons ceci.

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

/**
 * 将元素在其父元素中绝对居中
 * 没有将尺寸传递给mixin，因此它依赖于CSS转换
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴使用负边距，对垂直轴使用CSS转换
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将高度传递给mixin，因此我们对垂直轴使用负边距，对水平轴使用CSS转换
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * 将元素在其父元素中绝对居中
 * 将宽度传递给mixin，因此我们对水平轴和垂直轴都使用负边距
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}</code>

Maintenant que nous avons mis en place le cadre de Mixin, nous avons juste besoin de combler les lacunes avec la déclaration CSS réelle.

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

Remarque: #{0 0} La compétence est une technique pas si nettoyée utilisée pour empêcher le SASS de fonctionner légèrement trop agressive, ce qui peut provoquer margin: mt 0 ml plutôt que margin: mt 0 0 ml

Jusqu'à présent, tout s'est bien passé.

Aller plus loin

Nous pouvons faire plusieurs choses pour améliorer davantage notre mixin, comme inclure une règle

dans le mixin pour vérifier le support de conversion CSS, ou supposer que Modernizr existe (ou permet) et publie des styles conditionnels en fonction de la conversion de CSS soutenu ou non. Nous pouvons également effectuer des vérifications plus strictes sur les paramètres pour nous assurer qu'ils sont des valeurs valides de largeur et de hauteur. @supports

Cependant, vous devez vous demander si cela est une bonne chose. La complexité de boucle de Mixin elle-même a atteint 6, ce qui est beaucoup pour les fonctions Sass Helper. C'est toujours acceptable, mais l'ajout de code peut entraîner une nouvelle augmentation de la complexité de boucle.

Et Flexbox?

Je suis presque sûr que certains d'entre vous sautent sur le siège, réfléchissant à la façon dont nous pouvons utiliser Flexbox pour centrer un élément dans son élément parent. En effet, cela est possible, et il s'avère que si les conditions le permettent, c'est la plus simple de toutes les solutions.

La principale différence entre la solution que nous venons de configurer et la solution Flexbox est que le second est construit sur l'élément parent, tandis que le premier se concentre sur l'élément enfant (à condition que l'un de ses ancêtres soit positionné différemment de la statique).

Pour qu'un élément centre ses éléments enfants, vous n'avez qu'à définir trois propriétés. Vous pouvez créer un mixin, un espace réservé, une classe ou tout élément que vous aimez pour cela.

<code>/// 在其父元素中水平、垂直或绝对居中元素
/// 如果指定，此mixin将根据元素的尺寸使用负边距。否则，它将依赖于CSS转换，CSS转换的浏览器支持度较低，但由于它们与尺寸无关，因此更灵活。
///
/// @author Kitty Giraudel
///
/// @param {Length | null} $width [null] - 元素宽度
/// @param {Length | null} $height [null] - 元素高度
///
@mixin center($width: null, $height: null) { .. }</code>

En supposant que vous avez ajouté le préfixe du fournisseur pertinent (via Mixin ou AutopRefixer), cette solution doit "fonctionner correctement" dans de nombreux navigateurs.

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

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

Comme vous devez l'avoir deviné, il produit:

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

Réflexions finales

Nous voulons qu'un court mixage centrale facilement l'élément de son parent; ce mixin fait le travail et fait du bon travail. Non seulement il est suffisamment intelligent pour fonctionner, que l'élément ait une taille spécifique ou non, mais il fournit également une API amicale et intuitive, ce qui est très important.

En regardant le code, n'importe qui peut immédiatement comprendre que la ligne

contienne une fonction d'assistance qui effectue une logique pour centrer l'élément de son élément parent. Mais n'oubliez pas que pour que cette méthode fonctionne, ce dernier (ou tout élément parent de l'arbre Dom) doit avoir une position différente de la statique! ;) @include center

Vous pouvez utiliser ce code sur sassmeister:

https://www.php.cn/link/780bc6caf343bb06a4372c0821012624 .

(En raison des limitations de l'espace, la pièce FAQ est omise ici. Le contenu de la pièce FAQ est très dupliquée à partir du contenu de l'article et peut être ajouté ou modifié par vous-même si nécessaire.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!