CSS 中心の完全版_html/css_WEB-ITnose

https://css-tricks.com/centering-css-com... から翻訳しました

オリジナルの作者のコードを Github リポジトリに整理し、CSS センタリングの使用方法を更新し続けます。 Fork を歓迎し、私のプロジェクト css-center-complete にスターを付けてください。

CSS で要素を中央に配置する方法について、人々は常に不満を言います。なぜそんなに難しいのでしょうか？はは（この言葉を使ったこれより良い翻訳はありません）。問題は、それがどれだけ難しいかではなく、さまざまなシナリオで中心に置く方法がたくさんあり、どれを使用するかを決定するのが難しいことだと思います。

そこで、使いやすくしたいと考えて、これらの選択をツリーの形にしました。

水平方向中央揃え

それはインライン要素ですか、それともインラインのブロックレベル要素ですか? (inline または inline-block)

次のように、ブロック レベルの要素内でインライン要素を中央に配置できます:

.center-children {    text-align: center;}

コード リンク

このメソッドは、inline、inline-block、inline-table、inline-Elements の表示属性に機能します。 flexなどはどれも便利です。

ブロックレベル要素?

ブロックレベル要素の場合、マージン属性を auto に設定することでセンタリング効果を実現できます。幅を設定することが前提です。幅が設定されていない場合、デフォルトは 100% であり、中央揃えにする必要はありません。次のようになります:

.center-me {    margin: 0 auto;}

コードリンク

複数のブロックレベル要素?

2 つ以上のブロックレベル要素を連続して中央に配置する必要がある場合は、その表示属性を inline-block に設定するのが最善です。次の例では、フレックスボックス内で display: inline-block; を設定します。

コード リンク

複数のブロックレベルの要素を互いに重ね合わせたい場合を除き、amrgin: 0 auto ;Also;

コードリンク

垂直中央

インライン要素またはインラインブロックレベル要素? (inline または inline-block)

単一行

場合によっては、インライン要素が明らかに垂直方向に中央揃えになることがあります。上限と下限のパディング値を等しく設定するだけで済みます:

.link {    padding-top: 30px;    padding-bottom: 30px;}

パディングの設定が機能せず、テキストを中央揃えにしたい場合は、テキストの行の高さを等しくなるように設定できます。要素の高さ。

.center-text-trick {    height: 100px;    line-height: 100px;    white-space: nowrap;}

複数行

1. 均等パディングは複数行にも適用できます。それが機能しない場合は、要素またはテキストの表示プロパティが table-cell である可能性があります。この場合、垂直配置が機能します。他のケースとは異なり、これは行内の要素を中央に配置するために使用されます。

コードリンク

2. テーブルのような要素の中央揃えが機能しない場合は、フレックスボックスの使用を検討する必要がありますか?フレックスボックスの子要素をフレックスボックスの親要素内で中央に配置するのは簡単すぎます。

.flex-center-vertically {    display: flex;    justify-content: center;    flex-direction: column;    height: 400px;}

高さが固定されているのは親要素だけなので、このように書くのは理にかなっていることに注意してください。

3. 前の 2 つの方法が機能しない場合は、ゴースト要素の方法を使用できます。テキストが中央に配置されるように、高さ 100% の疑似要素を包含ブロック内に配置します。

.ghost-center {    position: relative;}.ghost-center::before {    content: " ";    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle;}.ghost-center p {    display: inline-block;    vertical-align: middle;}

コードリンク

ブロックレベルの要素

要素の高さをクリアする

Web ページのレイアウトの高さがわからないのはよくあることです。さまざまな状況が発生します:

• 幅が変更され、テキストが再配置され、高さが変更されます

• テキストスタイルが異なると高さも異なります

• テキストの量が異なると高さも異なります

• 画像などの固定比率の要素は、サイズなどを変更すると高さも変わります。

ただし、要素の高さがわかっていれば簡単です:

.parent {    position: relative;}.child {    position: absolute;    top: 50%;    height: 100px;    margin-top: -50px;     /* 如果没有使用border-box的话就只需要关心padding和border了 */}

コードリンク

要素の高さがわからない

要素の高さが不明な場合でも、最初に要素を 50% 下に移動し、次にその高さの半分だけ上に移動することで要素を中央に配置することができます。

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

コードリンク

フレックスボックスを検討していますか?

驚かないでください、フレックスボックスの使い方は簡単すぎます

.parent {    display: flex;    flex-direction: column;    justify-content: center;}

コードリンク

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

上記のテクニックをさまざまな方法で組み合わせて、完全に中央揃えの効果を達成することができます。しかし、これらの状況は次の 3 つのタイプに分類できると思います:

要素の幅と高さが固定かどうか

絶対配置を使用して上下 50%、左右 50% をそれぞれ設定した後、負の値を使用する幅と高さの半分に等しいマージン ブラウザ間で完全な中央揃えを実現できます:

.parent {    position: relative;}.child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    left: 50%;    margin: -70px 0 0 -170px;}

コードリンク

要素の幅と高さがわからないですか?

要素の幅と高さがわからない場合は、transform 属性を使用して、2 つの異なる方向に -50% (現在の要素の幅と高さに基づいて) を中央揃えに設定できます:

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

コードlink

flexbox

flexbox でセンタリングするには、2 つのセンタリング属性を使用する必要があります:

rrree

コードリンク

概要

上記の方法を通じて、CSS を使用して完璧なセンタリングを実現できます。