cssで上下中央に表示させるサンプル[画像やテキスト用途別紹介]

どうもー・ω・ガッチ(@MediaGatch)です。

cssで上下中央に表示する方法は、今ではたくさんありますが、8年WEB制作を行ってきた中でオススメという方法を紹介します。

cssで上下中央に表示する方法を知りたい。どのブラウザでも対応できる書き方が知りたい。そんな方へに向けた内容です。

cssを使い始めた頃は、何が何だか。。。。さっぱり。。。だと思うので、コピペサンプルを多く紹介していきますので、ぜひお試しください。

では、さっそくcssで上下中央表示する方法を。

記事の内容はこちら

css上下中央表示サンプル

cssで上下中央表示するサンプルを6つ載せています。ぜひ、使ってみてください。レスポンシブ対応したサンプルなので、PC/スマホどちらも同じcssでOKです。

他にもこんなサンプルが欲しい。などあればコメントやtwitterにて連絡もらえれば追加していきますので、気になる方は送ってください。

twitterはこちら >> ガッチ(@MediaGatch

css上下中央 ① 画像編

WEB制作でよくある画像の上下中央表示のサンプルです。 記事や商品の一覧だったり、レスポンシブ対応の画像だったり、使うところは多いのではないかと思います。

※上下中央するエリアは、わかりやすいように背景色をつけています。

<div class="area-1">
  <div class="centering-1">
    <img src="./css-centering.jpg">
  </div>
</div>  
<style>
.area-1{
  width: 200px;
  height: 200px;
  background-color: #0f0;
}
.centering-1{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

css上下中央 ② 画像編(スマホで画像サイズを画面内に)

画像サイズがスマホの横幅以上にあった場合のcssサンプルです。 レスポンシブ対応している場合にあるパターンかと思います。

上のサンプルと少し違い、画像をdivタグでくくっています。また、imgタグに width:100%; を指定しています。

<div class="area-2">
  <div class="centering-2">
    <div class="centering-2__thumb">
      <img class="centering-2__img" src="./css-centering-b.jpg">
    </div>
  </div>
</div>  
<style>
.area-2{
  width: 100%;
  height: 600px;
  background-color: #0f0;
}
.centering-2{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centering-2__img{
  width:100%;
}
</style>

css上下中央 ③ テキスト編

テキストを上下中央に表示させるサンプルです。 上の画像のサンプルに、text-align: center; を追加しただけです^^;

imgタグは、テキストと同じインライン要素のため同じcssで良いようです。

テキストテキストテキスト。
改行がある場合でも文字全体が中央になるようになっています。

<div class="area-3">
  <div class="centering-3">
    テキストテキストテキスト。<br>改行がある場合でも文字全体が中央になるようになっています。
  </div>
</div>  
<style>
.area-3{
  width: 200px;
  height: 200px;
  background-color: #0f0;
}
.centering-3{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>

css上下中央 ④ 画像とテキスト編

画像とテキストのセット表示もよく見かけますね。 サムネイル画像の横にページのタイトル表示は作れるようにしておくととても便利です。

imgをインライン要素から、block要素へ変換しています。

テキストテキストテキスト。
改行がある場合でも文字全体が中央になるようになっています。

<div class="area-4">
  <div class="centering-4">
    <img src="./css-centering.jpg">
    テキストテキストテキスト。<br>改行がある場合でも文字全体が中央になるようになっています。
  </div>
</div>  
<style>
.area-4{
  width: 100%;
  height: 200px;
  background-color: #0f0;
}
.centering-4{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

css上下中央 ⑤ 画像とテキスト編(スマホで配置が変わります)

スマホの時に画像を大きく表示するため、スマホの時だけレイアウトを変更するサンプルです。

上記の④のサンプルと違って、画像とテキストそれぞれをdivタグでくくっています。PCだけでは必要ないですが、スマホを考えると便利に使用できるのでhtmlも下記のような作りにしておくとレイアウト変更にも対応しやすくなりますので、オススメです。

テキストテキストテキスト。
改行がある場合でも文字全体が中央になるようになっています。

<div class="area-5">
  <div class="centering-5">
    <div class="centering-5__thumb">
      <img class="centering-5__img" src="./css-centering-b.jpg">
    </div>
    <div class="centering-5__text">
      テキストテキストテキスト。<br>改行がある場合でも文字全体が中央になるようになっています。
    </div>
  </div>
</div>  
<style>
.area-5{
  width: 100%;
  height: 100%;
  background-color: #0f0;
}
.centering-5{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centering-5__img{
  display: block;
  width:100%;
}
/* スマホなら */
@media only screen and (max-width: 480px){
.centering-5{
  flex-direction: column;
}
}
</style>

css上下中央 ⑥ モーダル編

モーダル表示でブラウザの上下中央に表示する場合のサンプルです。 こちらも最近のWEBサイトではよく使うかと思いますので、ぜひ使ってみてください。

javascriptのコードも載せていますので、すぐに使えます。

モーダルを表示
テキストテキストテキスト。
改行がある場合でも文字全体が中央になるようになっています。

<div id="js-btn-modal">モーダルを表示</div>
<div id="js-modal" class="area-6">
  <div class="centering-6">
    <div class="centering-6__window">
      <div class="centering-6__thumb">
        <img class="centering-6__img" src="./css-centering-b.jpg">
      </div>
      <div class="centering-6__text">
        テキストテキストテキスト。<br>改行がある場合でも文字全体が中央になるようになっています。
      </div>
    </div>
  </div>
</div>  
<style>
.area-6{
  position: fixed;
  top:0;
  left:0;
  display: none;
  width:100%;
  height:100%;
}
.area-6.show{
  display: block;
}
.centering-6{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0,0,0,0.5);
}
.centering-6__window{
  background-color: #0f0;
}
.centering-6__img{
  display: block;
  width:100%;
}
</style>
<script>
$(function(){
  $("#js-btn-modal").on({
    "click":function(){
      $("#js-modal").addClass("show");
    },
  })
  $("#js-modal").on({
    "click":function(){
      $(this).removeClass("show");
    },
  })
});
</script>

まとめ

今回は、cssで上下中央に表示する方法のサンプルを載せました。 基本的には display:flex; を使った方法ですので、これをマスターしてレスポンシブ対応した レイアウトを簡単に作ることができる様になります。

cssは簡単でわかりやすいんですが、仕様が変化して行ったり、書き方が決まっていないため逆に複雑になってしまったりと、、、なかなか奥が深いので、自分にあった書き方を見つけるまでは大変です。

多くのサンプルを見て書いて、自分いあったcssスタイルを見つけてもらえたらと思います。