【最新】CSSで要素を中央に配置する方法: position: absoluteとFlexboxの使い方

こんにちは静岡県浜松市でフリーランスWebデザイナーの小瀧です。

Webブデザインにおいて、要素を中央に配置することはよくある課題の一つですよね。
コーディング初めは悩んだりする問題でもあるので、そんな方に向けて今回は覚えておくと良い方法を備忘録として記載します。
要素を中央に配置する方法にはさまざまな方法がありますが、今回は特に position: absolute と Flexbox を使用した方法を詳しく解説します。
これらのテクニックをマスターすることで、より自由自在なレイアウトが可能になりますよ！

position: absolute を使った中央配置

まずは、position: absolute を使った中央配置の方法を見ていきましょう。この方法は、特定の要素を親要素の中央に配置する際に便利です。

<div class="container">
    <div class="centered-element">中央に配置する要素</div>
</div>

.container {
    position: relative;  /* 親要素は relative を設定 */
    width: 100%;
    height: 100vh;  /* 高さをビュー高さに設定 */
}

.centered-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 要素の中央を基準に位置を調整 */
}

解説

1.親要素に position: relative を設定

親要素に position: relative を設定することで、子要素の position: absolute が親要素に対して相対的に配置されます。

2.子要素に position: absolute を設定

子要素に position: absolute を設定し、top: 50% と left: 50% を指定することで、子要素の左上隅が親要素の中心に配置されます。

3.transform: translate(-50%, -50%) を使用

このプロパティで要素自身の幅と高さの50%分を逆方向に移動させ、要素の中心が親要素の中心に一致するようにします。

Flexbox を使った中央配置

次に、より簡潔で柔軟な Flexbox を使った中央配置の方法を紹介します。Flexbox は CSS のレイアウトモデルで、要素を簡単に中央揃えにすることができます。

<div class="flex-container">
    <div class="centered-element">中央に配置する要素</div>
</div>

.flex-container {
    display: flex;
    justify-content: center;  /* 水平方向の中央揃え */
    align-items: center;  /* 垂直方向の中央揃え */
    width: 100%;
    height: 100vh;  /* 高さをビュー高さに設定 */
}

.centered-element {
    /* position: absolute は不要 */
}

解説

1.親要素に display: flex を設定

親要素に display: flex を設定することで、Flexbox のレイアウトコンテナになります。

2.justify-content: center を設定

justify-content: center を使用して、子要素を水平方向に中央揃えします。

3.align-items: center を設定

align-items: center を使用して、子要素を垂直方向に中央揃えします。

どちらの方法を選ぶべきか？

どちらの方法も有効ですが、用途に応じて使い分けると良いです！

まとめ

要素を中央に配置することは、ウェブデザインにおいて頻繁に求められるタスクです。
position: absolute を使う方法と Flexbox を使う方法の両方をマスターすることで、さまざまなシチュエーションに対応できるようになります。
今回紹介したテクニックを活用して、美しく整ったレイアウトを実現してみてください！

追加のヒント

CSSを活用して、見栄えの良いウェブサイトを作成する楽しさをぜひ体験してみてください。中央配置のテクニックを習得することで、デザインの幅が大きく広がります！