Bootstrap 4でdisplay: flex;とjustify-content: center;を使って垂直方向に中央揃え
2024-04-02
Bootstrap 4で垂直方向に中央揃えする方法
align-items クラスを使用する
全体を中央揃え
.container や .row などの要素に align-items-center クラスを指定すると、その要素内のコンテンツを垂直方向に中央揃えすることができます。
<div class="container">
<div class="row align-items-center">
<div class="col">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</div>
特定の列のみ中央揃えしたい場合は、その列に align-self-center クラスを指定します。
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="col-sm-6 align-self-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</div>
flexbox を使用する
.d-flex と align-items-center クラスを要素に指定することで、Flexbox レイアウトを有効化し、コンテンツを垂直方向に中央揃えすることができます。
<div class="container d-flex align-items-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="container">
<div class="d-flex align-items-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
margin: 0 auto; を使用する
単一の要素を中央揃え
margin: 0 auto; を要素に指定することで、その要素を水平方向に中央揃えすることができます。
<div class="container">
<div style="margin: 0 auto;">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
position: absolute; を使用する
複雑なレイアウト
position: absolute; と top: 50%; を使用して要素を垂直方向に中央揃えし、left: 50%; と transform: translate(-50%, -50%); を使用して水平方向に中央揃えすることができます。
<div class="container">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
Bootstrap 4で垂直方向に中央揃えを行うには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるので、目的に合った方法を選択する必要があります。
align-items クラスを使用する
<div class="container">
<div class="row align-items-center">
<div class="col">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</div>
特定の列のみ中央揃え
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="col-sm-6 align-self-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</div>
flexbox を使用する
<div class="container d-flex align-items-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="container">
<div class="d-flex align-items-center">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
margin: 0 auto; を使用する
<div class="container">
<div style="margin: 0 auto;">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
position: absolute; を使用する
<div class="container">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
補足
上記は基本的な例です。より複雑なレイアウトの場合は、これらの方法を組み合わせて使用することができます。
また、Bootstrap 4には他にも垂直方向に中央揃えを行う方法があります。詳細については、Bootstrap ドキュメントを参照してください。
Bootstrap 4で垂直方向に中央揃えを行う他の方法
text-align: center; を使用する
<div class="container">
<h1 style="text-align: center;">タイトル</h1>
<p style="text-align: center;">本文</p>
</div>
display: flex; と justify-content: center; を使用する
<div class="container" style="display: flex; justify-content: center;">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="container">
<div style="display: flex; justify-content: center;">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
position: relative; と top: 50%; を使用する
<div class="container">
<div style="position: relative; top: 50%;">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
css twitter-bootstrap bootstrap-4
