Berpusat dengan sass

mata teras

yang menyentuh CSS, terutamanya berpusat menegak, boleh menjadi rumit. SASS boleh merangkumi pelbagai kaedah berpusat CSS ke dalam campuran yang mudah digunakan.
Kaedah berpusat bergantung kepada sama ada saiz elemen diketahui. Jika tidak diketahui, gunakan transformasi CSS untuk peningkatan fleksibiliti; Sass Mixin meletakkan sudut kiri atas elemen di tengah -tengah bekas dan menggerakkannya ke belakang separuh lebar dan ketinggiannya.
Mixin boleh diperbaiki dengan memasukkan
• peraturan untuk memeriksa sokongan penukaran CSS, atau dengan melakukan pemeriksaan yang lebih ketat pada parameter untuk memastikan ia adalah nilai yang sah lebar dan ketinggian. @supports
Flexbox adalah satu lagi penyelesaian untuk memusatkan elemen dalam elemen induknya. Lebih mudah digunakan jika syarat membenarkan. Flexbox pusat elemen kanak -kanak dengan menetapkan tiga atribut pada elemen induk.
CSS yang berpusat di CSS sentiasa menjadi tugas yang membosankan dan bahkan menjadi jenaka dalam bahasa, yang membawa kepada lelucon seperti "kami berjaya menghantar angkasawan ke bulan, tetapi kami tidak dapat menyelaraskan secara menegak dalam CSS".

Walaupun CSS sememangnya agak rumit apabila berurusan dengan berpusat, terutama yang berpusat secara menegak, saya fikir jenaka ini agak tidak adil. Sebenarnya, terdapat banyak cara untuk memusatkan kandungan dalam CSS, anda hanya perlu tahu bagaimana untuk melakukannya.

Artikel ini tidak bertujuan untuk menerangkan bagaimana kaedah ini berfungsi, tetapi untuk menggambarkan bagaimana ia terkandung dalam Sass Mixin untuk memudahkan penggunaan. Jadi jika anda merasa sedikit tidak selesa dengan CSS yang berpusat, saya cadangkan anda membaca beberapa sumber terlebih dahulu:

bagaimana untuk berpusat di CSS

• CSS Centered: Panduan Lengkap
Adakah anda sudah bersedia? Mari bermula.

Gambaran Keseluruhan

Pertama, kita akan memberi tumpuan kepada memusatkan elemen dalam elemen induknya, kerana ini adalah kes penggunaan yang paling biasa untuk pusat mutlak (kotak modal, bahagian, dll.). Apabila anda bertanya kepada seseorang mengenai CSS yang berpusat, respons biasa yang anda dapat ialah:

Adakah anda tahu saiz elemen?

Sebabnya ialah jika anda tidak mengetahui saiz elemen, penyelesaian terbaik adalah bergantung kepada penukaran CSS. Ini sedikit akan mengurangkan sokongan penyemak imbas, tetapi ia sangat fleksibel. Jika anda tidak boleh menggunakan penukaran CSS atau mengetahui lebar dan ketinggian elemen, mudah bergantung pada margin negatif. jadi mixin kami pada dasarnya akan melakukan perkara berikut: Letakkan sudut kiri atas elemen yang benar Atau tidak, gerakkannya ke belakang dengan lebarnya menggunakan penukaran CSS atau margin negatif bergantung kepada sama ada saiznya diluluskan ke mixin. Tiada saiz: Gunakan penukaran; dengan saiz: Gunakan margin.

maka anda boleh menggunakannya seperti ini:

Selepas penyusunan, ia harus mengeluarkan yang berikut:

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

OK, ini kelihatan sedikit verbose, tetapi ingat bahawa output ini hanya untuk tujuan demonstrasi sahaja. Dalam kes yang diberikan, tidak mungkin anda akan mendapati diri anda menggunakan semua kaedah ini pada masa yang sama.

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

Bina Mixin

Baiklah, mari kita menggali lebih mendalam. Dari coretan kod sebelumnya, kita sudah tahu tandatangan Mixin: ia mempunyai dua parameter pilihan, $width dan $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>

Teruskan. Walau bagaimanapun, Mixin memerlukan kedudukan mutlak unsur -unsur, jadi kita boleh bermula dari titik ini.

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

kita perlu menulis kod dengan bijak. Mari berhenti di sini dan menganalisis pilihan yang berbeza yang kita ada:

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

mari kita gunakan ini.

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

Sekarang kita telah menubuhkan rangka kerja untuk Mixin, kita hanya perlu mengisi jurang dengan perisytiharan CSS sebenar.

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

Nota: #{0 0} kemahiran adalah teknik yang tidak begitu bersih yang digunakan untuk mengelakkan SASS daripada melakukan pemampatan yang terlalu agresif, yang boleh menyebabkan margin: mt 0 ml bukannya margin: mt 0 0 ml

Setakat ini, semuanya berjalan lancar.

Langkah lebih jauh

kita boleh melakukan beberapa perkara untuk meningkatkan lagi campuran kita, seperti termasuk peraturan

dalam mixin untuk memeriksa sokongan penukaran CSS, atau mengandaikan bahawa Modernizr wujud (atau membolehkan) dan mengeluarkan gaya bersyarat berdasarkan sama ada penukaran CSS adalah disokong atau tidak. Kami juga boleh melakukan pemeriksaan yang lebih ketat pada parameter untuk memastikan ia adalah nilai yang sah lebar dan ketinggian. @supports Walau bagaimanapun, anda perlu bertanya kepada diri sendiri sama ada berbuat demikian adalah perkara yang baik. Kerumitan gelung Mixin sendiri telah mencapai 6, yang cukup banyak untuk fungsi penolong sass. Ia masih boleh diterima, tetapi menambahkan lebih banyak kod kepadanya boleh menyebabkan peningkatan selanjutnya dalam kerumitan gelung.

Bagaimana dengan Flexbox?

Saya cukup yakin ada di antara kamu yang melompat di tempat duduk, memikirkan bagaimana kita boleh menggunakan Flexbox untuk memusatkan elemen dalam elemen induknya. Sesungguhnya, ini mungkin, dan ternyata jika syarat -syarat membenarkan, ini adalah yang paling mudah dari semua penyelesaian.

Perbezaan utama antara penyelesaian yang kami buat dan penyelesaian Flexbox adalah bahawa yang terakhir dibina di atas elemen induk, sementara yang pertama memberi tumpuan kepada elemen kanak -kanak (dengan syarat mana -mana nenek moyangnya diposisikan secara berbeza daripada statik).

Agar elemen untuk memusatkan elemen anaknya, anda hanya perlu menetapkan tiga sifat. Anda boleh membuat campuran, pemegang tempat, kelas, atau elemen yang anda suka untuk ini.

Dengan mengandaikan anda telah menambah awalan vendor yang berkaitan (melalui Mixin atau AutoPrefixer), penyelesaian ini harus "berfungsi dengan baik" dalam banyak pelayar.

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

seperti yang anda telah meneka, ia menghasilkan:

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

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

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

Pemikiran Akhir

Kami mahu campuran pendek untuk memusatkan elemen dengan mudah di ibu bapa; Bukan sahaja cukup pintar untuk bekerja tanpa mengira sama ada elemen mempunyai saiz tertentu atau tidak, ia juga menyediakan API yang mesra dan intuitif, yang sangat penting.

Dengan melihat kod itu, sesiapa sahaja dapat memahami dengan segera bahawa garis

mengandungi fungsi pembantu yang melakukan beberapa logik untuk memusatkan elemen dalam elemen induknya. Tetapi ingatlah bahawa agar kaedah ini berfungsi, yang terakhir (atau mana -mana elemen induk dalam pokok Dom) mesti mempunyai kedudukan yang berbeza daripada statik! ;)

@include center Anda boleh menggunakan kod ini pada Sassmeister:

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

(disebabkan oleh batasan ruang, bahagian FAQ ditinggalkan di sini. Kandungan bahagian FAQ sangat diduplikasi dari kandungan artikel, dan boleh ditambah atau diubahsuai sendiri seperti yang diperlukan.)

Atas ialah kandungan terperinci Berpusat dengan sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!