CSS_html/css_WEB-ITnoseの各種センタリング

個人ブログからの転載

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

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

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

このブログのすべてのセンタリング例は CSS の実装についてのみ説明しています。HTML コードは次のように統一されています:

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

1. 水平方向のセンタリング

1.1 inline-block with text-align

利点: 非常に良い互換性: IE6 および 7 と互換性を持たせるには、子要素の CSS に *display:inline と *zoom:1 を追加するだけです。欠点: 内部テキストも水平方向に中央揃えになるため、影響を排除する必要があります。

1.2 table with margin

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

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

1.3 abasolute with Transform

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

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

2. 垂直方向の中央揃え

2.1vertical-align

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

を使用した table-cell

利点: 親要素を設定するだけで済み、IE8 以降と互換性があり、ローカル ブラウザーと互換性がある場合は div を置き換えることができます。テーブル構造。

2.2Absolute は、transform

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

と連動します

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

3. 水平方向 + 垂直方向の中央揃え

3.1 text-align を使用した inline-block と、vertical-align を使用した table-cell

利点: 最初の 2 つの方法を組み合わせると、互換性が高くなります。 IE8+をサポートしており、それ以前のバージョンのブラウザとも互換性があります。短所: 設定がより複雑になります。

3.2 絶対変換付き

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

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

4. Almighty flex

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

4.1 水平方向の中央揃え

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

4.2 垂直方向の中央揃え

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

4.3 水平方向と垂直方向の中央揃え

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