先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで画面の真ん中に要素を配置したいんですが、どうやればいいですか？」

先生

「positionとtransformを組み合わせると簡単に中央配置ができます。初心者でもすぐに理解できますよ。」

生徒

「positionって何ですか？初めて聞きました。」

先生

「positionは要素の配置方法を指定するCSSプロパティです。absoluteやrelativeなどを使います。」

生徒

「なるほど、transformはどう使うんですか？」

先生

「transformを使うと、要素を移動したり拡大縮小できます。中央配置にはtranslateという機能を使います。」

1. positionとtransformを使った中央配置の基本

CSSで要素を中央に置く場合、position: absoluteを使って画面の左上からの位置をtopとleftで50%にします。しかし、このままだと左上が中央に来てしまうため、transform: translate(-50%, -50%)で自分の幅と高さの半分だけ戻します。これで要素が正確に中央に配置されます。

2. 具体的な中央配置のサンプルコード


<style>
    .container {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: #f8f9fa;
    }
    .center-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        background-color: #0d6efd;
        color: white;
        text-align: center;
        line-height: 150px;
        font-weight: bold;
        border-radius: 10px;
    }
</style>

<div class="container">
    <div class="center-box">中央配置</div>
</div>

ブラウザ表示

このサンプルでは、青いボックスが親要素の中央に配置されます。position: absoluteとtransformを組み合わせることで、画面サイズに関係なく中央に置けます。