mata teras
@supports
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
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, Teruskan. Walau bagaimanapun, Mixin memerlukan kedudukan mutlak unsur -unsur, jadi kita boleh bermula dari titik ini. kita perlu menulis kod dengan bijak. Mari berhenti di sini dan menganalisis pilihan yang berbeza yang kita ada: mari kita gunakan ini. Sekarang kita telah menubuhkan rangka kerja untuk Mixin, kita hanya perlu mengisi jurang dengan perisytiharan CSS sebenar. Nota:
Langkah lebih jauh
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.
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.
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
(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.) $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><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>
宽度
高度
解决方案
未定义
未定义
translate
定义
定义
margin
定义
未定义
margin-left translateY
未定义
定义
translateX margin-top
<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><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} 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
@supports
<code>/// 在其父元素中水平、垂直或绝对居中元素
/// 如果指定，此mixin将根据元素的尺寸使用负边距。否则，它将依赖于CSS转换，CSS转换的浏览器支持度较低，但由于它们与尺寸无关，因此更灵活。
///
/// @author Kitty Giraudel
///
/// @param {Length | null} $width [null] - 元素宽度
/// @param {Length | null} $height [null] - 元素高度
///
@mixin center($width: null, $height: null) { .. }</code><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>@include center Anda boleh menggunakan kod ini pada Sassmeister:
Atas ialah kandungan terperinci Berpusat dengan sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
