CSS:flexbox要素のdisplay:flexで高さを揃え、テキストを上下左右中央配置する方法

コンテンツの高さが異なる要素を横並びにしているとき、高い要素に合わせて可変させつつ、コンテンツは真ん中に配置する方法です。

長い文章長い文章長い文章長い文章長い文章長い文章長い文章

短い文章

▼HTML

<div class="demo">
<div class="box red center"><b>長い文章長い文章長い文章長い文章長い文章長い文章長い文章</b></div>
<div class="box green center"><b>短い文章</b></div>
</div>

<div class="box red center"><b>長い文章長い文章長い文章長い文章長い文章長い文章長い文章</b></div>

</div>

▼CSS

.demo {
  /** 高さ揃えるcss**/
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center; /** 真ん中寄せ **/
}
.demo .box {
  width: 200px;
  background: #f71137;
  padding: 20px;
  color: #fff;
  margin: 20px;
  text-align: center;
  /** 以下中央揃え**/
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

}
.demo .green {
  background: #00c1a6;
}

.demo {

/** 高さ揃えるcss**/

display: -webkit-flex;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: center; /** 真ん中寄せ **/

}

.demo .box {

width: 200px;

background: #f71137;

padding: 20px;

color: #fff;

margin: 20px;

text-align: center;

/** 以下中央揃え**/

display: -webkit-box;

display: -ms-flexbox;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.demo .green {

background: #00c1a6;

}

編集者：コウ

年間約20万人が訪れるKOHIMOTO Laboの広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書｜テクノロジー × ヒューマニティのpositiveな未来🌍

応募ページ到達が+2.1倍⤴「ブランドサイト」と「採用サイト」は分けるべき？事例で費用対効果をデータで比較してみた。

2025.04.10 プロジェクト

Category

CSS:flexbox要素のdisplay:flexで高さを揃え、テキストを上下左右中央配置する方法

Related article

Pick Up