初心者のためのCSSによるテキストの中央揃え

CSSでテキストを中央揃えにする方法をご紹介します！
本記事では、テキストの**水平方向（横方向）および垂直方向（縦方向）**の中央揃えの方法について解説しています。初心者の方にも分かりやすいように、具体的なサンプルや実用的なヒントを交えて説明しています。

関連項目

CSSでテキストを水平方向（横方向）に中央揃えする方法

左右に余白がある要素：text-align: center

HTML 
<h5>左右に余白がある要素</h5>
CSS 
h5 {
    background-color: orange; /* 左右に余白のある要素です */
    text-align: center;       /* この要素の横幅を基準にテキストを中央揃えにします */
}
結果画面

左右に余白のない要素：左右に余白のある親要素に対して、text-align: center;を指定する

HTML 
<div class="container">
    <span>左右に余白のない要素</span>
</div>
CSS 
container {
    background-color: orange; /* 左右に余白のある要素です */
    text-align: center;       /* 左右に余白のある親要素の横幅を基準に、子要素のテキストを中央揃えにします */
}
.container span {
    background-color: pink;   /* 左右に余白のない要素です */
}
結果画面

左右に余白のない要素：左右に余白のある親要素に対して、display: flex;と justify-content: center;

HTML 
<div class="container">
    <span>左右に余白のない要素</span>
</div>
CSS 
.container {
    background-color: orange; /* 左右に余白のある要素です */
    display: flex;
    justify-content: center;  /* 子要素を水平方向（横方向）に中央揃えにします */
}
.container span {
    background-color: pink;   /* 左右に余白のない要素です */
}
結果画面

CSSでテキストを垂直方向（縦方向）に中央揃えする方法

自分自身のテキストコンテンツを中央揃えにする方法：line-height

HTML 
<h5>line-heightを使う</h5>
CSS 
h5 {
    background-color: orange;
    line-height: 200px; /* この要素のテキストを基準に、上下方向で中央揃えにします */
}
結果画面

自要素のテキストコンテンツを中央揃えにする方法：display: flex;とalign-items: center;

HTML 
<h5>flexを使う</h5>
CSS 
h5 {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* 子要素を垂直方向（縦方向）に中央揃えにします */
}
結果画面

自要素のテキストコンテンツを中央揃えにする方法：display: table-cell;とvertical-align: middle;

HTML 
<h5>table cellを使う</h5>
CSS 
h5 {
    background-color: orange;
    height: 200px;
    display: table-cell;
    vertical-align: middle; /* テキストを垂直方向（縦方向）に中央揃えにします */
}
結果画面

親要素に display: flex;とalign-items: center;

HTML 
<div class="container">
    <span>子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* 子要素を垂直方向（縦方向）に中央揃えにします */
}
.container span {
    background-color: pink;
}
結果画面

親要素と子要素に positionとtransform プロパティを使う方法

HTML 
<div class="container">
    <span>子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    position: relative;
}
.container span {
    background-color: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
結果画面

CSSでテキストを水平方向（横方向）および垂直方向（縦方向）に中央揃えする方法

自要素のテキストコンテンツを中央揃えにする方法：line-heightとtext-align: center

HTML 
<h5>line-heightを使う</h5>
CSS 
h5 {
    background-color: orange;
    text-align: center;   /* この要素の横幅を基準にテキストを中央揃えにします */
    line-height: 200px;   /* この要素のテキストを基準に上下方向で中央揃えにします */
}
結果画面

左右に余白のある親要素に対して、display: flex;、justify-content: center;、およびalign-items: center;

HTML 
<div class="container">
    <span>子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    justify-content: center; /* 子要素を水平方向（横方向）に中央揃えにします */
    align-items: center;     /* 子要素を垂直方向（縦方向）に中央揃えにします */
}
.container span {
    background-color: pink;
}
結果画面

親要素と子要素に positionとtransform を使う方法

HTML 
<div class="container">
    <span>子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    position: relative;
}
.container span {
    background-color: pink;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
結果画面

参考資料

関連項目