CSSで文字を中央寄せする方法をとその実践例

text-align: center;を使う方法

親要素にtext-align: center;を適用した例

ブロック要素の中央寄せの文字

インライン要素の文字

親要素にflexやgridを適用した文字

---

子要素に直接text-align: center;を適用した例

ブロック要素の中央寄せの文字

インライン要素の文字

親要素にflexやgridを適用した文字

ソースコード：

                
<section class="text_align_center">
    <h3>親要素に<code>text-align: center;</code>を適用した例</h3>
    <p>ブロック要素の中央寄せの文字</p>
    <span>インライン要素の文字</span>
    <img src="https://picsum.photos/200/300" alt="ランダムな画像">
    <div style="display: flex;">
        <p>親要素にflexやgridを適用した文字</p>
    </div>
</section>
<hr>
<section class="text_align">
    <h3>子要素に直接<code>text-align: center;</code>を適用した例</h3>
    <p>ブロック要素の中央寄せの文字</p>
    <span>インライン要素の文字</span>
    <img src="https://picsum.photos/200/300" alt="ランダムな画像">
    <div style="display: flex;">
        <p>親要素にflexやgridを適用した文字</p>
    </div>
</section>
                
            

                
.text_align_center {
    text-align: center;
}
.text_align > p, .text_align > span, .text_align > img, .text_align > div > p {
    text-align: center;
}
                
            

margin: 0 auto;を使う方法

ブロック要素の中央寄せの文字

インライン要素の文字

ソースコード：

                
<p class="margin_0_auto">ブロック要素の中央寄せの文字</p>
<span class="margin_0_auto">インライン要素の文字</span>
<img src="https://picsum.photos/200/300" alt="ランダムな画像" class="margin_0_auto" id="margin_0_auto_img">
<div style="display: flex;" class="margin_0_auto">
    <p>親要素にflexやgridを適用した文字</p>
</div>
                
            

                
.margin_0_auto {
    width: 50%;
    margin: 0 auto;
}
#margin_0_auto_img {
    width: 200px;
    height: 300px;
}
                
            

display: flex;を使う方法

ソースコード：

                
<div class="flex">
    <p>中央寄せの文字</p>
</div>
<div class="flex">
    <span class="margin_0_auto">インライン要素の文字</span>
</div>
<div class="flex">
    <img src="https://picsum.photos/200/300" alt="ランダムな画像" class="margin_0_auto" id="margin_0_auto_img">
</div>
                
            

                
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
                
            

display: grid;を使う方法

ソースコード：

                
<div class="grid">
    <p>中央寄せの文字</p>
</div>
<div class="grid">
    <span class="margin_0_auto">インライン要素の文字</span>
</div>
<div class="grid">
    <img src="https://picsum.photos/200/300" alt="ランダムな画像" class="margin_0_auto" id="margin_0_auto_img">
</div>
                
            

                
.grid {
    display: grid;
    place-items: center;
}
                
            

絶対位置指定を使う方法

ソースコード：

                
<div class="relative">
    <p class="absolute">中央寄せの文字</p>
</div>
<div class="relative">
    <span class="absolute">インライン要素の文字</span>
</div>
<div class="relative">
    <img src="https://picsum.photos/200/300" alt="ランダムな画像" class="absolute"&
</div>
                
            

                
.relative {
    position: relative;
    width: 100%;
    height: 300px;
}
.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}