CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素を垂直方向・水平方向に中央揃えする方法

CSSで要素を垂直方向と水平方向の両方に中央揃えしたい場合、最も簡単で推奨される方法はFlexbox（フレックスボックス）を使うことです。親要素に display: flex を設定し、justify-content: center と align-items: center を指定するだけで、子要素を中央に配置できます。

Flexboxを使った中央揃えの実装例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid rgb(0, 70, 128);
    }
</style>
</head>
<body>
<h1>Centering Example</h1>
<div class="centered">
<h2>This text is centered vertically and horizontally both</h2>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSで要素を垂直方向・水平方向に中央揃えする方法

コードのポイント

  • display: flex; … 親要素をフレックスコンテナとして設定します。
  • justify-content: center; … 主軸（水平方向）に対して子要素を中央に配置します。
  • align-items: center; … 交差軸（垂直方向）に対して子要素を中央に配置します。
  • height: 200px; … 垂直方向の中央揃え効果がわかるように、親要素に高さを指定しています。

代替方法：CSS Gridを使う

CSS Gridレイアウトを使えば、さらに短いコードで中央揃えが実現できます。親要素に place-items: center を指定するだけで、垂直・水平両方の中央寄せが可能です。

.centered {
    display: grid;
    place-items: center;
    height: 200px;
    border: 3px solid rgb(0, 70, 128);
}

どちらの方法もモダンブラウザで広くサポートされており、状況に応じて使い分けることで、柔軟かつきれいなレイアウトを作成できます。

  1. CSSでWebサイト全体を水平方向に中央揃えする方法

    CSSを使ってWebサイトのコンテンツを水平方向（左右）に中央揃えするには、max-width と margin: auto を組み合わせるのが最もシンプルで定番の方法です。コンテナ要素の最大幅を指定し、左右のマージンを自動（auto）に設定することで、画面サイズに関わらず要素が常に中央に配置されます。以下に、実際のコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-sc

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進