ホームページ > 記事 > ウェブフロントエンド > Sass を使用して、CSS で垂直方向と水平方向のセンタリングをエレガントかつ効率的に実装します (Flex レイアウト、CSS3+SASS 完全バージョンが付属)_html/css_WEB-ITnose
Sass を使用して、CSS で垂直方向と水平方向のセンタリングをエレガントかつ効率的に実装します (Flex レイアウト、CSS3+SASS 完全バージョンが付属)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:571115ブラウズ
CSS の水平方向と垂直方向の中央揃えを実現する方法はたくさんあります。ここでは、より一般的な 4 つの方法について簡単に説明します。
1. CSS3 で Flex レイアウトを使用する
Flex について理解する必要があるのは、次のとおりです。これは表示属性であり、その親要素に flex 属性を設定する必要があります (flex は絶対配置で使用する必要があります!!!!)。display: flex の設定に加えて、他に 2 つの属性を設定する必要があります。 、つまり justify -content と align-items は、それぞれ水平方向の中央揃えと垂直方向の中央揃えを意味します。 HTML+CSS コードは次のとおりです。
body { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.parentNode { width: 400px; height: 400px; background: #f00;}
<body> <div class="parentNode"></div></body>
要件が変更された場合、たとえば、上で述べたように、サブ DIV を次のようにしたい場合、この div 内に div をネストしたいとします。親 DIV も次のように設定します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { position: absolute; // flex必须配合absolute使用才会生效 width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .parentNode { width: 400px; height: 400px; background: #f00; position: relative; // 这里必须用relative 原因是 相对于 body这个父标签定位 如果用absolute会找上级的relative，如果没有，就到顶级的document display: flex; justify-content: center; align-items: center; } .childNode { width: 200px; height: 200px; background: #fff; } </style></head><body> <div class="parentNode"> <div class="childNode"></div> </div></body></html> 2. CSS3 でtransformを使用します
.parentNode { width: 400px; height: 400px; background: #f00; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
3. 要素の幅と高さがわかったら、CSS2 で最も一般的なマージンを使用します
.parentNode { width: 400px; height: 400px; background: #f00; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px;}
4. 特別なマージンを使用します: auto
.parentNode { width: 400px; height: 400px; background: #f00; overflow: auto; margin: auto; // 在标准流的情况下，让 margin-top 以及 margin-bottom 都为0 position: absolute; top: 0; left: 0; bottom: 0; right: 0; // 使浏览器对其元素所在的区域内重新渲染，四个值都设为0目的是让整个窗口都为该元素的重新渲染区域，之后margin-top以及margin-bottom都相等 } 次に、強力な SASS を使用してこれらのスタイルを再構築しましょう。flex から始めましょう。 Web サイト全体の場合、色、フォントなど、Sass には同様の小さなスタイルがいくつかあります。「$」変数を使用して Sass でそれらを均一に処理できるため、この選択は依然として適切です。しかし、スタイルがますます複雑になり、スタイルの大部分を再利用する必要がある場合、変数を使用しても目的を達成できません。このとき、Sass の mixin マクロは非常に意味のあるものになります。 @mixin は、CSS の @media や @font-face に似た、mixin マクロを宣言するためのキーワードです。 center は mixin マクロの名前です。中括弧内は再利用されたスタイル コードです。 @include は混合マクロを呼び出します。パラメーターを使用せずにミックスイン マクロを宣言するだけでなく、パラメーターを使用してミックスイン マクロを定義することもでき、その中により複雑なロジックを記述することができます。
以下では、if else ステートメントと @mixin ハイブリッド マクロを使用して、上記の 2、3、4 のメソッドをカプセル化します。
私たちのアイデアは、まず DIV の左上隅をコンテナの中心に絶対的に配置し、次に要素の幅と高さをそれぞれ表す 2 つのオプションのパラメーター ($width、$height) をミックスインに追加することです。パラメータが渡される場合は、負のマージン メソッドを使用してセンタリングを実現します。パラメータが渡されない場合は、CSS3 変換メソッドを使用します。
@mixin center { display: flex; justify-content: center; align-items: center;}body { position: absolute; width: 100%; height: 100%; @include center;<br /> .parentNode { width: 400px; height: 400px; background: #f00; position: relative; @include center;<br /> .childNode { width: 200px; height: 200px; background: #fff; } }} ここで、@mixin のカプセル化を開始します。上記の CSS 分析から、センタリングを実現するには、要素を最初に絶対的に配置する必要があることがわかります
/** * 为子元素设定定位上下文 */.parent { position: relative;}/** * 让子元素绝对居中于父容器 * 没有向 Sass mixin 传递宽和高，使用 CSS transform 属性实现居中效果 */.child-with-unknown-direction { @include center;}/** * 让子元素绝对居中于父容器 * 向 Sass mixin 传递了宽度，所以就使用负向 margin 处理水平位置， * 使用 CSS transform translateY 处理垂直位置 */.child-with-known-width { @include center(400px);}/** * 让子元素绝对居中于父容器 * 向 Sass mixin 传递了高度，所以就使用负向 margin 处理垂直位置， * 使用 CSS transform translateX 处理水平位置 */.child-with-known-height { @include center($height: 400px);}/** * 让子元素绝对居中于父容器 * 向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置 */.child-with-known-direction { @include center(400px, 400px);} 次に、に従って @mixin のスケルトンを構築します。次のロジック
幅高さソリューション
| translate | define | |
| margin | define | |
| マージン左 + 翻訳Y | null | |
| margin-right + translationX |
@mixin center($width: null, $height: null) { position: absolute; top: 50%; left: 50%;} 最後に、特定のコードをさまざまな条件に挿入します
@mixin center($width:null,$height:null){ display: flex; justify-content: center; align-items: center; @if $width and $height { // do margin } @else if not $width and not $height { // do transform translate(-50%,-50%) } @else if not $width { // do margin-top and transform translateX } @else { // do margin-left and transform translateY }} ついに、Koala ソフトウェアを使用したオフライン コンパイルも可能になりましたhttp://www.sassmeister.com/オンラインコンパイルを通じて行われ、以下はコンパイル結果です
@mixin center($width:null,$height:null){ position: absolute; top: 50%; left: 50%; @if $width and $height { // do margin width: $width; height: $height; margin: -($height / 2) #{0 0} -($width / 2); //这里如果直接写 0 0 他会编译为 margin: xx 0 xx 而不是 margin：xx 0 0 xx，所以用 #{0 0}<br /> } @else if not $width and not $height { // do transform translate(-50%,-50%) transform: translate(-50%,-50); } @else if not $width { // do margin-top and transform translateX height: $height; margin-top: -(height / 2); transform: translateX(-50%); } @else { // do margin-left and transform translateY width: $width; margin-top: -(width / 2); transform: translateY(-50%); }}