[css]横並びで高さを合わせたコンテンツを縦方向に中央寄せする方法

cssでdisplay:flexを使用した際に、横並びの高さを合わせられたけど、縦方向に中央寄せできないという方向けの記事となります。

display:flexを使うことで、高さを合わせたコンテンツを横並びにすることはできると思いますが、中央寄せにできないということがありませんか？

また中央寄せはできたけど、せっかく合わせた高さが変わってしまい、上手に中央によったまま高さを維持できないってことがありませんでしたか？

今回は、高さを合わせたまま縦方向に中央寄せする方法をご紹介したいと思います。

HTMLとCSSを使って、横並びのコンテンツを中央寄せにする

まずは、HTMLとCSSを横並びのコンテンツを単純に中央寄せにしてみようと思います。それにはdisplay:flexとalign-items:centerを使用します。こちらは横並びのコンテンツを高さを合わせて表示させるといったものの応用になります。

<style>
 .flex_box{
  font-size:0;
  display:flex;
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items:center;
 }
 .flex_box .content{
   width:30%;
   margin-left:1%;
  margin-right:1%;
  margin-bottom:50px;
  font-size:16px;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:30px;
 }
</style>
<div class="flex_box">
  <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
  <div class="content">
   HTMLとCSSで横並びにします。
  </div>
 <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
</div>

横並びのコンテンツをdisplay:flexを使って縦方向に中央寄せしたサンプル実装例

HTMLとCSSで横並びにします。

HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。 HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。

上記のように中央寄りにはなりましたが、高さが維持されていない状態ですね。
align-items:centerを親要素に記述することでこのように高さが違う状態で中央に寄せることができます。

HTMLとCSSを使って、高さを維持したままコンテンツを中央寄せする

次に先ほどの状態から高さも合わせた状態で中央寄せするためにはどうすればいいか考えてみましょう。先ほど親要素のalign-items:centerを持たせていましたが、子の要素に持たせ、また子の要素にもdisplay:flexを持たせてみましょう。

<style>
 .flex_box1{
  font-size:0;
  display:flex;
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
 }
 .flex_box1 .content{
   width:30%;
   margin-left:1%;
  margin-right:1%;
  margin-bottom:50px;
  font-size:16px;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:30px;
 display: flex;
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
   align-items: center;
   justify-content: center;
 }
</style>
<div class="flex_box1">
  <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
  <div class="content">
   HTMLとCSSで横並びにします。
  </div>
 <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
</div>

高さを維持したまま縦方向に中央寄せした状態のサンプル

HTMLとCSSで横並びにします。

上記のように、全ての高さが揃ったまま、縦方向に中央寄せすることができましたね。

まとめ

今回は、横に並んだコンテンツの高さを合わせるだけでなくてさらに縦方向に高さを維持したまま中央に寄せるにはどうすればいいのかと、単純に全てのコンテンツを高さバラバラで高さを合わせる方法の２つをご紹介させていただきました。このようなことを要求されることは多いのではないでしょうか？ぜひ、試してみてください。

Profile Card