CSSを使った各種中央寄せレイアウト方法まとめ

この記事では、CSSを使用したさまざまなセンタリングレイアウト方法をまとめています。興味のある方は参考にしてください。

この記事では、センタリングの状況を可変合計幅と可変コンテンツ幅に設定する場合について説明します。 (サイズを変更しても中央に配置されたままです)。

特記事項:position:absolute; を設定して要素にセンタリング効果を設定する場合、ブログで紹介した CSS3 メソッドに加えて、負のマージンを使用してセンタリングすることもできます。ただし、これは互換性の問題を解決しますが、これは にのみ適用されます。幅と高さの既知のケース (負のオフセットは要素の幅と高さの半分であるため)。幅と高さが変更されると、中央揃えの効果はなくなります。

これらのレイアウトの子要素は、属性設定によりデフォルトでコンテンツの幅になります。

この記事のすべての中央揃えの例では、CSS の実装についてのみ説明します。HTML コードは次のように統一されています:

1.1 inline-block with text-align

<p class="parent">   
    <p class="child">demo</p>   
</p>

利点: IE6 および 7 と互換性を持たせるには、子要素の CSS に *display:inline と *zoom:1 を追加するだけで済みます。また、水平方向の中央に配置されます。これには、の効果を除去する必要があります。

1.2 マージン付きテーブル

.parent{   
    text-align: center;   
}   
.child{   
    display: inline-block;   
}

利点: 設定は非常に簡単です。サブ要素を設定するだけです。IE8+ をサポートします。IE6 および 7 をサポートする場合、サブ要素はテーブル構造。

transform 付き 1.3 abasolute

.child{   
    display:table;   
    margin: 0 auto;   
}

利点: 中央に配置された要素は他の要素に影響を与えません。欠点: CSS3 の新しい属性は IE9 以降をサポートしますが、それより前のバージョンのブラウザーはサポートしません。

2. 垂直方向の中央揃え

2.1vertical-align を使用したテーブルセル

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    left:50%;   
    transform: translateX(-50%);   
}

利点:親要素を設定するだけで簡単、IE8+ と互換性あり互換性のあるバージョンのブラウザを使用している場合は、p をテーブル構造に置き換えることができます。

2.2 絶対は、transform で動作します

.parent{   
    display: table-cell;   
    vertical-align:middle;   
}

利点: 中央に配置された要素は、他の要素に影響を与えません。欠点: CSS3 の新しい属性は IE9 以降をサポートしますが、それより前のバージョンのブラウザーはサポートしません。

3. 水平方向 + 垂直方向のセンタリング

3.1 text-align を使用したインラインブロックと、vertical-align を使用したテーブルセル

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    top: 50%;   
    transform: translateY(-50%);   
}

利点: 最初の 2 つの方法を包括し、互換性がある良いセックス！ IE8+をサポートしており、それ以前のバージョンのブラウザとも互換性があります。短所: 設定がより複雑になります。

3.2 絶対変換付き

.parent{   
    display: table-cell;   
    vertical-align:middle;   
    text-align:center;   
}   
.child{   
    display: inline-block;   
}

利点: 中央に配置された要素は他の要素に影響を与えません。欠点: CSS3 の新しい属性は IE9 以降をサポートしますが、それより前のバージョンのブラウザーはサポートしません。

4. Almighty flex

css3 は新しいレイアウト属性を備えています。レイアウトはシンプルで強力ですが、パフォーマンスは IE10+ のみをサポートしており、主にモバイル端末で使用されます。

4.1 水平方向のセンタリング

.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    transform: translate(-50%,-50%);   
}

4.2 垂直方向のセンタリング

/*当父元素设置display: flex;时，子元素为flex-item，默认为内容宽度。*/  
.parent{   
    display: flex;   
    justify-content: center;   
}   
/* 在设置子元素为margin: 0 auto;时，可删除父元素的justify-content: center;同样可以达到居中效果*/  
/*  .child{
        margin: 0 auto;   
    }*/

4.3 水平方向と垂直方向のセンタリング

.parent{   
    display: flex;   
    align-items: center;   
}

以上がこの記事の全内容です, みなさんのお役に立てれば幸いです 学習は役に立ちます。

以上がCSSを使った各種中央寄せレイアウト方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。