# 子要素の高さを揃えてコンテンツを上下中央のCSS実装

> 複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/equal-height-center/

## HTML

```html
<div class="card-row">
  <div class="card">
    <div class="card-content">
      <h3>タイトル1</h3>
      <p>短いテキスト</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h3>タイトル2</h3>
      <p>こちらは少し長めのテキストが入ります。<br>複数行でも高さが揃います。</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h3>タイトル3</h3>
      <p>中央揃え＆高さ揃え</p>
    </div>
  </div>
</div>
```

## CSS

```css
.card-row {
  display: flex;
  gap: 1rem;
}
.card {
  flex: 1 1 0;
  background: #f3ecd9;
  border-radius: 0.75rem;
  min-width: 0;
  display: flex;
  /* stretchで高さ揃え */
  align-items: stretch;
}
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  width: 100%;
  height: 100%;
}
```

## 仕組みの解説

高さ揃えはFlexboxの標準動作（align-itemsの初期値stretch）をそのまま使います。各カードに flex: 1 1 0 を指定すると内容量に関係なく等幅になり、行内で最も背の高いカードに全員の高さが揃います。カードの内側にもう1段flexコンテナを作り、justify-content: center で中身を上下中央に置くのがこのレシピの2段構えです。min-width: 0 は長文での折り返し崩れを防ぐ保険です。

## 実装のポイント

親にdisplay: flex; 子にalign-items: stretch; 子要素内にjustify-content: center; align-items: center;でOK。min-width: 0;で折り返しも安全。

## AIに依頼するときの文例

横並びカードの高さを揃え、各カードの中身を上下中央に配置するレイアウトを作ってください。flex: 1 1 0で等幅化し、カード内は縦方向のflexでjustify-content: centerを使ってください。

## 使っているプロパティ

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [flex-grow-shrink-basis](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [gap](https://www.css-dictionary.com/property/gap.md)