CSSの中央要素（縦・横にセンタリング）

1．水平方向

それはinlineまたはinline-*要素（text やlinkなど）ですか？

text-alignを使用して、inline要素を親のblock-levelの内側の水平方向の中央に配置できます。

style.css

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

それはblock-levelの要素ですか？

margin-leftとmargin-rightをauto値に設定することでblock-levelの要素を中央に配置できます（この要素は幅を設定する必要があります。そうしないと、幅全体を占めして、中央に配置されません）。次の省略形を使用するできます。

style.css

.center-me {
    margin: 0 auto;
}

複数のblock-levelの要素がありますか？

行の中央に配置する必要がある2つ以上のblock-levelの要素がある場合、表示方法をinline-blockに変更することをお勧めします。

style.css

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

.center-me {
     display: inline-block;
}

または、flexboxを使用することもできます。

style.css

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

2．垂直方向

それはインラインまたはインライン-*要素（テキストやリンクなど）ですか？

その要素は1行しか占めていませんか？

多くの場合、インライン/テキスト要素は、上下のパディングが等しいという理由だけで中央に配置されます。

style.css

.center-me {
    padding-top: 30px;
    padding-bottom: 30px;
}

何らかの理由でpaddingを使用できず、折り返さないと思われるtextを中央に配置しようとしている場合は、line-heightを同じ高さに設定できます。

style.css

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

その要素は多くの行を占めていますか。

paddingを上下に等しく設定すると、複数行の要素を中央に配置するのにも役立ちます。ただし、同じ要素がテーブルセルで作成されている場合は、vetical-alignプロパティをmiddleの値に割り当てることができます。

style.css

.center-me {
     verticle-align: middle;
}

flex-directionの値がcolumnであり、高さが固定されているflexboxを使用することもできます。

style.css

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

上記のいずれの方法も機能しない場合は、「ゴースト要素」という手法を使用できます。この手法では、full-heightの疑似要素がコンテナ要素に配置され、textにvertical-align:middleが割り当てられます。

style.css

.ghost-center {
     position: relative;
}

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

.ghost-center p {
     display: inline-block;
     verticle-align: middle;
}

それはblock-levelの要素ですか？

その要素の高さを知っていますか？

通常、要素の高さは固定されていません。その場合は、次のように要素を垂直方向の中央に配置できます。

style.css

.center-parent {
     position: relative;
}

.center-me {
     position: absolute;
     top: 50%;
     height: 100px;
     margin-top: -50px;
}

その要素の高さがわかりませんか？

テクニックは高さを知ることに似ていますが、負のmargin-topを使用する代わりに、要素をその高さの約半分に垂直に移動します。

style.css

.center-parent {
     position: relative;
}

.center-me {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
}

flexboxは使えますか？

これがflexboxで簡単にできるのは当然のことです。

style.css

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

3．水平方向と垂直方向の両方

これを実現するには、上記の水平方向と垂直方向のセンタリング手法を組み合わせて使用​​できますが、以下の手法を使用することもできます。

その要素は固定の幅と高さですか？

要素を上下50％で絶対的（absolute）に配置した後、要素の幅と高さの半分に等しい負のmarginを使用すると、多くのブラウザーで要素が完全に中央に配置されます。

style.css

.center-parent {
     position: relative;
}

.center-me {
     width: 200px;
     height: 100px;
 
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -50px 0 0 -100px;
}

その要素の幅と高さがわかりませんか？

transformプロパティを使用して、要素を高さの半分上に移動し、幅の半分を左に移動して、上記と同じ結果を得ることができます。

style.css

.center-parent {
     position: relative;
}

.center-me {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

flexboxは使えますか？

flexboxで両方のディメンションを中央に配置するには、justify-contentとalign-itemsを使用する必要があります。

style.css

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

4．結論

CSSを使用してすべてを中央に配置できます。