マンガでわかるホームページ作成

CSSでテキストや画像を上下中央寄せにする方法5選

CSSを使ってテキストや画像を上下中央寄せにしたいけどやり方がよくわからない!

という方のためにCSSでテキストや画像を上下中央寄せにする方法を5種類解説します。目的に合わせて使ってください。

下記ではテキストで例を記載していますがテキスト部分を画像(img)に置き換えれば画像の上下中央寄せができます。

また、上下左右中央寄せの方法も記載していますので必要に応じてご利用ください。

方法1.【万能】display:flex;align-items: center;

上下中央寄せにしたいテキスト
<style>
.example{
    display: flex;
    align-items: center;
    height: 100px;
    background: #f2f2f2;
    border: 1px solid #999;
}
</style>
<div class="example">
    上下中央寄せにしたいテキスト
</div>

display:flexは要素の位置調整をするCSSです。

横並べにするためだけと思いがちですが、並べる位置を調整するのにもよく使います。

左右も中央寄せする場合「justify-content: center;」を追記しましょう。

上下左右中央寄せにしたいテキスト

方法2.【表なら】tdにvertical-align:middle

上下中央寄せにしたいテキスト
<style>
.example2{
    display: table;
    width: 100%;
    height: 100px;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example2>div{
    display: table-cell;
    vertical-align: middle;
}
</style>
<div class="example2">
    <div>上下中央寄せにしたいテキスト</div>
</div>

table内のセルであるtdならvertical-align: middleで上下中央寄せにできます。

上記はdivをdisplayでtableにしていますが、もちろんtableタグを使ってもOKです。

ただし、tableやtdは表で使うべきでありレイアウトを整えるためだけに使うべきではありません。

左右も中央寄せする場合、tdに「text-align: center;」を追記しましょう。

上下左右中央寄せにしたいテキスト

方法3.【縦横サイズが決まってるなら】position:absolute

上下中央寄せにしたいテキスト
<style>
.example3{
    position: relative;
    height: 100px;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example3>div{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1.5em;
    line-height: 1.5;
    margin: auto;
}
</style>
<div class="example3">
    <div>上下中央寄せにしたいテキスト</div>
</div>

position:absoluteとtop,bottom,margin:autoを組み合わせると上下中央寄せができます。

ただし、縦の高さを指定しなければなりません。

縦横のサイズが明確なときだけ利用しましょう。

左右も中央寄せする場合はleft:0;right: 0;を追記しwidthを指定しましょう。

上下左右中央寄せにしたいテキスト

方法4.【縦の間隔が決まってるなら】padding

上下中央寄せにしたいテキスト
<style>
.example4{
    padding: 40px 0;
    background: #f2f2f2;
    border: 1px solid #999;
}
</style>
<div class="example4">
    上下中央寄せにしたいテキスト
</div>

paddingを使って文字の上下にスペースを作ります。

左右も中央寄せする場合「text-align: center;」を追記しましょう。

上下中央寄せにしたいテキスト

方法5.【1行なら】line-height

上下中央寄せにしたいテキスト
<style>
.example5{
    line-height: 4;
    background: #f2f2f2;
    border: 1px solid #999;
}
</style>
<div class="example5">
    上下中央寄せにしたいテキスト
</div>

1行だけの場合line-heightの指定で十分です。

line-heightは上下の文字間隔を指定するCSSです。

左右も中央寄せする場合「text-align: center;」を追記しましょう。

上下中央寄せにしたいテキスト

まとめ

  1. 【万能】display:flex;align-items: center;
  2. 【表なら】tdにvertical-align:middle
  3. 【縦横サイズが決まってるなら】position:absolute
  4. 【縦の間隔が決まってるなら】padding
  5. 【1行なら】line-height

以上、CSSでテキストを上下中央寄せにする方法でした。

関連記事