CSSで上下中央配置をしたいけど、どの方法が良いのかわからない
CSSで指定したけど、上下中央に配置できない
結局どれを使えば良いのかいつも迷ってしまう
CSSで要素を上下中央に配置するコードの特徴や使いどころを理解していなければ、実装に時間がかかってしまいます。
そこで本記事では、初心者が迷わず使えるように代表的な上下中央揃えの方法と、その使用シチュエーションをわかりやすく解説します。
CSSで上下中央揃えにする主な方法一覧
CSSで上下中央に揃えるには、さまざまな方法があります。
ここでは、主に使用する方法を紹介します。
| 使い方 | 対応する要素 | 得意な場面 | 使用例 | |
| Grid | 親要素にdisplay: grid;を指定し、place-items: center;で子要素を上下左右中央に配置 | すべての要素 | 複数要素の上下左右中央揃え | Webサイトのトップで、キャッチコピーやメインビジュアルの上下中央揃え |
| Flexbox | 親要素にdisplay: flex;を指定し、align-items: center;で垂直方向、justify-content: center;で水平方向に中央揃え | すべての要素 | 複数要素の並列配置を維持して中央揃え | 複数のボタンを含むナビゲーションバーの中央揃え |
| position | 子要素を絶対配置し、topとleftを50%に設定。さらにtransform: translate(-50%, -50%);で自身のサイズ分だけ移動させ、中央に配置 | 単一の要素 | モーダルやポップアップなどの固定位置の中央配置 | 画面中央に表示されるモーダルウィンドウ |
| line-height | 親要素のheightとline-heightを同じ値に設定し、テキストを垂直方向に中央揃え | 単一行のインライン要素やテキスト | テキストやボタン内の中央揃え | ボタン内のテキストの上下中央揃え |
それぞれの使い方について詳しく解説していきます。
興味のある項目から確認してください。
一行で上下中央に揃えられる？
親要素にalign-content: centerを指定すると、一行だけで上下中央揃えができます。FlexboxやGridレイアウトで使用されていましたが、divタグやpタグのようなブロック要素でも使用できるようになりました。しかし、最新のブラウザではサポートが進んでいますが、古いバージョンや一部のブラウザでは未対応のものがあります。実務で使用するときは、プロジェクトの動作環境を確認しましょう。
【CSSで上下中央揃え①】Grid
コピー
<div class="container">
<div class="content">
<p>これはGridを使用しています</p>
</div>
</div> コピー.container {
display: grid;
place-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.content {
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
}Gridを使用する上下中央揃えは、display:grid;とplace-items: center;の組み合わせです。
中央揃えに必要なコードは2つだけで、とてもシンプルにコーディングできます。
上記のコーディングを解説すると、最初に親要素のcontainerクラスにdisplay:grid;を指定し、グリッドレイアウトを設定しましょう。
次にplace-items: center;を指定し、子要素のcontentを上下左右中央揃えにします。
place-items: center;の効果は直接の子要素にのみ適用されるため、孫要素であるpタグには反映されません。
place-items: center;は、親要素の中の「直接的な子要素」に効くと覚えておくと良いでしょう。
上下中央にするために必要なコード
display: grid;
place-items: center;
【CSSで上下中央揃え②】Flexbox
コピー
<header class="nav-container">
<nav class="nav-bar">
<ul class="nav-list">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">会社概要</a></li>
</ul>
</nav>
</header>
コピー
.nav-container {
background-color: #333;
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
}
.nav-bar {
display: flex;
}
.nav-list {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.nav-list li {
margin: 0 15px;
}
.nav-list a {
text-decoration: none;
color: #fff;
transition: color 0.3s;
}
.nav-list a:hover {
font-weight: bold;
}Flexboxを使用する上下中央揃えは、display: flex;とjustify-content: center;、align-items: center;を組み合わせてコーディングします。
Flexboxは、一列に複数の要素を並べて中央に揃えたいときに便利です。
上記のコーディングを見ると、最初に親要素のnav-containerクラスにdisplay: flex;を指定して、全体を横並びにします。
justify-content: center;で子要素を左右中央に寄せ、align-items: center;で上下中央に配置させましょう。
Flexboxは複数の要素を均等に配置できるため、ヘッダーやフッターで使用するとスムーズにコーディングできます。
上下中央にするために必要なコード
display: flex;
justify-content: center;
align-items: center;
【CSSで上下中央揃え③】position
コピー
<div class="container">
<img class="center-image" src="/img/css-csnter.jpg" alt="サンプル画像" />
</div>
コピー
.container {
position: relative;
height: 500px;
width: 500px;
border: solid 1px #333;
}
.center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
}positionを使用して上下中央に揃える方法は、親要素にposition: relative;を設定し、子要素にposition: absolute;を指定して配置を決めます。
モーダルウィンドウや画像の中央配置など、さまざまな場面で使えるコーディング方法です。
上記のコーディング例を解説すると、最初に親要素であるcontainerクラスにposition: relative;をして基準点を指定します。
次に子要素のcenter-imageクラスにposition: absolute;を指定して、画像を親要素の中で自由に配置できるようにしましょう。
画像の左上の角が親要素の高さと幅の50%地点に配置するように、top: 50%; と left: 50%;を指定します。
最後にtransform: translate(-50%, -50%);を指定すると、画像自身のサイズの半分だけ、上下左右に移動でき、上下中央揃えができます。
positionで上下中央にする方法は、必要なコードが多いため、コードスニペットを作成しておくと、次回以降の作業の効率化が可能です。
上下中央にするために必要なコード
親要素
position: relative;
子要素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
【CSSで上下中央揃え④】line-height
コピー
<div class="container">
<button class="center-button">クリック</button>
</div>
コピー
.container {
height: 100vh;
}
.center-button {
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-weight: bold;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
.center-button:hover {
opacity: 0.7;
}line-heightで上下中央揃えをする方法は、単一行のテキストを縦方向の中央に配置に使用します。
line-heightは、テキストの高さを決めるプロパティです。
値を要素の高さ（height）と同じに設定すると、テキストが垂直方向の中央に揃います。
今回はcenter-buttonクラスのheightが50pxということから、line-height: 50px;を指定して、テキストがボタンの中央に配置されるようにしています。
追加でtext-align: center;を指定すると、左右中央揃えも可能です。
上下中央にするために必要なコード
line-height
まとめ：CSSの上下中央揃えを使い分けよう
CSSで要素を上下中央に配置するには、Grid、Flexbox、position、line-heightなどを使った方法があります。
それぞれのコードを使ってさまざまなアプローチができますが、コードの書き方や得意な場面が異なります。
プロジェクトに応じて最適な方法を選んで、効率的なコーディングを目指しましょう。
CSSの上下中央揃えについてより深く学び、実践的なコーディングスキルを身につけたい方は、デイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
