CSSで画像の中央に文字を配置する方法【基本を理解すれば簡単】

アフロ

CSSで文字を画像の上下左右揃えて、真ん中に表示させたいけど、どうすればいいの？？

お任せあれ！！！！！

にぃやん

この記事は以下の疑問に答えます。

この記事を書く僕のことを軽く紹介しておきます。

なので、現在現場で使われているコードの書き方を紹介できます。

CSSで画像の中央に文字を配置する方法

CSSで画像の中央に文字を表示させるのはとても簡単です。

最初に今回使う核となるコードを伝えます。

「position」と「transform」です。

画像や背景に文字を重ねるイメージでしょうか。

覚えてしまえば、お好みの位置に文字以外も配置できるようになっちゃいます。

それでは早速いってみましょうー！！

文字を中央配置するコード解説

今回、作りたいの物はこんな感じ。
「HTML」「CSS」「Result」のタブをクリックしてもらえれば、コードを確認できます。

See the Pen
mdOxbdb by えんにぃ (@enjiniyan)
on CodePen.

完成系のコードがこちら。

HTML

<div class="wrap">
  <div class="images"></div>
  <h1 class="title">タイトル</h1>
</div>

CSS

.wrap {
width: 50vw;
height: 200px;
margin: 0 auto;
position: relative;
}
.images {
width: 50%;
height: 100%;
background-color: #FCB632;
margin: 0 auto;
}
.title {
font-size: 30px;
font-weight: bold;
color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

デザインは例の如く最低限で実装しています。

まずは、配置させたい文字の親要素にあたる、<div class="wrap">にposition: relative;のスタイルを指定します。

その次に、配置させたい文字（子要素にすること）

<h1 class="title">タイトル</h1>にposition: absolute;を指定して準備完了です。

その後は上下左右揃うようにまずは下記のように

 css
top: 50%;
left: 50%;

上から半分、左から半分の位置に指定します。
ここでどこを基準？？と思われたかもしれません。

先ほど準備したのを振り返りましょう。

「position: relative」を親要素に指定しましたね！！

親要素を基準にして動きます。

このとき、動かしたい子要素に「position: absolute」が指定されてる必要があります。

 css
transform: translate(-50%,-50%);

最後にこれを指定します。
この指定をしない場合で表示を確認すると分かるのですが、
子要素のどの部分を真ん中の配置するか指示しています。

デフォルトでは、子要素の左上が親要素の中央に配置されます。
なので子要素の中央が親要素の中央に配置される、おまじないです。

wrapに当てているスタイル

 css
width: 50vw;
margin: 0 auto;

これの意味は単に幅を指定し全体を真ん中に表示させています。

今回のお題には関係ないですが、「margin: 0 auto」は良く使う手法なので覚えておいて、損はないです。

 css
position: relative;

こちらを指定することで、どれに対して配置させるかの
どれ！？を指定しています。

imagesに当てているスタイル

今回は背景色をつけてダミーの背景画像にしています。

titleに当てているスタイル

 css
font-size: 30px;
font-weight: bold;
color: blue;

文字のデザインです。

 css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

上で説明した通り、
今回のお題のメインコードです。

親要素の画像に対して、
文字を上下と左右揃えて、中央に表示させています。

まとめ：CSSで画像の中央に文字を配置する方法

今回のコード解説は以上です。

この「position」をマスターすれば
色んな要素を重ねて表示させたりできます。

良く使われるのは、サイトのheroと呼ばれているエリア！！
例えばこんな感じ！

応用もできるので、是非試してみてください。

僕の記事をお読みいただくと、
誰にでも分かりやすくコード解説しているので、興味があれば他の記事もお読みいただけると嬉しいです。

以下に今回の大事なポイントをまとめます。

以上です。
ありがとうございました。

にぃやん

それでは！よきプログラミングLifeを！！