【完全ガイド】CSSでテキストを縦中央に配置する7つの方法と使い分け
2024-04-02
CSSでテキストを垂直方向に中央揃えする方法
代表的な方法
display: flex と align-items: center を使う
- 親要素に
display: flexを設定し、子要素を垂直方向に中央揃えしたい場合はalign-items: centerを設定します。 - これは最もシンプルで汎用性の高い方法です。
- ただし、IE 10 以前では対応していないため、古いブラウザをサポートする必要がある場合は注意が必要です。
例
<div class="container">
<p>テキスト</p>
</div>
.container {
display: flex;
align-items: center;
}
margin: 0 auto を使う
- テキスト要素に
display: blockとmargin: 0 autoを設定します。 - これは、テキスト要素のみを垂直方向に中央揃えしたい場合に有効です。
- ただし、親要素の高さが固定されていない場合、テキストが上下に中央揃えされないことがあります。
<p>テキスト</p>
p {
display: block;
margin: 0 auto;
}
position: absolute と top: 50% を使う
- テキスト要素に
position: absoluteとtop: 50%を設定し、transform: translateY(-50%)を追加します。 - これは、親要素の高さが可変の場合でも、テキストを上下に中央揃えしたい場合に有効です。
<p>テキスト</p>
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
line-height を使う
- テキスト要素の
line-heightを、親要素の高さと同じ値に設定します。 - ただし、複数行のテキストの場合は、中央揃えされないことに注意が必要です。
<div class="container">
<p>テキスト</p>
</div>
.container {
height: 100px;
}
p {
line-height: 100px;
}
<div class="container">
<p>テキスト</p>
</div>
.container {
text-align: center;
}
p {
padding-top: 50px;
}
上記以外にも、flexbox や grid レイアウトなどの新しいレイアウトシステムを用いてテキストを垂直方向に中央揃えする方法があります。 これらの方法は、より柔軟なレイアウトを実現できますが、ブラウザの対応状況や複雑さを考慮する必要があります。
CSSでテキストを垂直方向に中央揃えするには、いくつかの方法があります。 それぞれの方法の特徴と使い分けを理解し、目的に合った方法を選択することが重要です。
<div class="container">
<p>テキスト</p>
</div>
.container {
display: flex;
align-items: center;
}
<p>テキスト</p>
p {
display: block;
margin: 0 auto;
}
<p>テキスト</p>
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<p>テキスト</p>
</div>
.container {
height: 100px;
}
p {
line-height: 100px;
}
<div class="container">
<p>テキスト</p>
</div>
.container {
text-align: center;
}
p {
padding-top: 50px;
}
各方法の比較
| 方法 | 特徴 | メリット | デメリット |
|---|---|---|---|
display: flex と align-items: center | シンプルで汎用性が高い | すべての主要なブラウザに対応している | IE 10 以前では対応していない |
margin: 0 auto | テキスト要素のみを中央揃えしたい場合に有効 | シンプル | 親要素の高さが固定されていない場合、中央揃えされないことがある |
position: absolute と top: 50% | 親要素の高さが可変の場合でも中央揃えできる | 柔軟性が高い | IE 8 以前では対応していない |
line-height | 1行だけのテキストを中央揃えしたい場合に有効 | シンプル | 複数行のテキストの場合は中央揃えされない |
text-align: center と padding-top | テキスト要素だけでなく、その周りの余白も含めて中央揃えできる | すべての主要なブラウザに対応している | IE 7 以前では対応していない |
CSSでテキストを垂直方向に中央揃えするその他の方法
display: table と vertical-align: middle を使う
- 親要素に
display: tableとheight: 100%を設定し、子要素にdisplay: table-cellとvertical-align: middleを設定します。 - これは、IE 7 以前を含むすべてのブラウザに対応していますが、テーブルレイアウトの影響を受けるため、他の方法と比べてレイアウトが崩れやすいというデメリットがあります。
<div class="container">
<p>テキスト</p>
</div>
.container {
display: table;
height: 100%;
}
p {
display: table-cell;
vertical-align: middle;
}
display: grid と align-items: center を使う
- これは、比較的新しい方法ですが、Flexboxよりもレイアウトが柔軟で、IE 11 以前を含む多くのブラウザに対応しています。
<div class="container">
<p>テキスト</p>
</div>
.container {
display: grid;
height: 100%;
}
p {
align-items: center;
}
CSS Grid の place-items を使う
- これは、
align-items: centerとjustify-items: centerを同時に設定するショートハンドプロパティです。
<div class="container">
<p>テキスト</p>
</div>
.container {
display: grid;
height: 100%;
}
p {
place-items: center;
}
CSS3 の margin-inline: auto を使う
- これは、FlexboxやGridレイアウトを使わずに、テキスト要素のみを垂直方向に中央揃えしたい場合に有効です。
<p>テキスト</p>
p {
display: block;
margin-inline: auto;
}
html css vertical-alignment
