【CSS Tips】レスポンシブなWebサイトにおける要素の最大幅で横中央揃えのCSSの書き方

## これは何

レスポンシブなWebサイトを作る時にありがちな、「画面幅が広い時は、要素の最大幅で横中央揃え」になり、「画面幅が狭い時は、左右に余白を持って画面幅に合わせて横幅が狭くなる」要素のCSSの書き方です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/924797dc-96d2-ae8d-8672-f12104f405df.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/6ec0a52c-4aa5-37aa-e91c-74c67cfd936a.gif)

## 方法① gridを使った方法

1. main要素と、mainの中のコンテンツを用意する
2. main要素に、`padding-inline: 8px;`と`display: grid;`
、`grid-template-columns: minmax(auto, [content-max-width]);`を指定する

まず、`padding-inline`をmain要素に指定しておくことで、画面幅が狭くなった時もコンテンツの左右に余白を残すことができます。

そして、main要素に`display: grid;`
、`grid-template-columns: minmax(auto, [content-max-width]);`を指定することで、子要素の横幅が最大[content-max-width]で横幅いっぱいに広がります。

また、`justify-content: center;`を指定しておくことで、画面幅が[content-max-width]よりも大きい時も、コンテンツが中央に配置されます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYzQrYZ" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/vYzQrYZ">
  [grid]画面幅が狭くなると、合わせて横幅が縮む要素</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

個人的にはこの方法が、応用も効きやすく、レイアウトに関する指定を要素一箇所にまとめられるので好きです。

## 方法② `display: flex`と`max-width`を使った方法

1. main要素と、mainの中のコンテンツを用意する
2. main要素に、`padding-inline: 8px;`と`display: flex;`、`justify-content: center;`を指定する
3. コンテンツに、`max-width: [content-max-width]];`、`width: 100%;`を指定する

この方法では、コンテンツに`max-width: [content-max-width]];`、`width: 100%;`を指定することで、子要素の横幅が最大[content-max-width]で横幅いっぱいに広げます。

また、main要素に`display: flex;`、`justify-content: center;`を指定しておくことで、コンテンツを中央に配置します。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKxreVE" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/KKxreVE">
  [flex]画面幅が狭くなると、合わせて横幅が縮む要素</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 方法③ `margin: auto`と`max-width`を使った方法

1. main要素と、mainの中のコンテンツを用意する
2. main要素に、`padding-inline: 8px;`を指定する
3. コンテンツに、`margin: auto;` と `max-width: [content-max-width]];`、`width: 100%;`を指定する

この方法では、コンテンツに`margin: auto;`を指定しておくことで、コンテンツを中央に配置します。

この方法の方がCSSの行数は減らせますが、方法②の方が中央揃えにしていることが明示的なので、その点で使い分けしています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOdQzyG" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/gOdQzyG">
  [margin: auto]画面幅が狭くなると、合わせて横幅が縮む要素</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>