[CSS]上下左右中央は2行で済ませる！

![「[CSS]上下左右中央は2行で済ませる！」のアイキャッチ画像](/images/tmb/css-place.jpg)

CSSを書くうえで、利用頻度が著しく高いのに書くのが割と面倒なのが、上下左右中央。Flexboxが登場して3行のコードで上下左右中央でき流ようになったけど、Gridを使えばさらに短い2行で済ませることができそう。

## Gridを使って2行で上下左右中央

### `place-items` を使う方法

`place-items`で`align-items`と`justify-items`をまとめることができる。

“`css
display: grid;
place-items: center;
“`

### `place-content` を使う方法

`place-content`は`align-content`と`justify-content`をまとめることができる。

“`css
display: grid;
place-content: center;
“`

### ブラウザ対応状況

{{}}

***

## でも、Flexは2行では書けない…？

[Twitterで](https://twitter.com/takamosoo/status/1290520674025353216)`place-items`の存在を知ったのですが、そこでは`display: flex;`を使ってました。でも、実際にコードにしてみると動かない…？

#### `justify`,`align`,`content`,`items` のまとめ

> `justify系`は主軸、`align系`は交差軸
>
> `content系`は余白間隔、`items系`はアイテムの配置

## Flexでは効かないプロパティがいくつかある

折り返しさせない`flex-wrap: nowrap;`の場合（初期値）、`align-content`は効かない。また、Flexでは`justify-items`が機能しない。

なので、Flexでも無理やり`place系`使うことはできるけど、結局`place-content`と`place-items`を指定する必要があるので3行になってしまう。

“`css
display: flex;
place-content: center;
place-items: center;
“`

なので、flexを使うなら大人しく今まで通りでいいのかな。

“`css
display: flex;
align-items: center;
justify-content: center;
“`

***

どうなんだろ、自分のミスな気もするけど、ツイート主さんに確認する勇気もない…笑

▶︎[Tweet @takamosoo – Twitter](https://twitter.com/takamosoo/status/1290520674025353216)

▶︎[flexのalign-items と align-content と justify-content と justify-items の違い – Qiita](https://qiita.com/MyPoZi/items/3c2464884e9593a719c6#主軸交差軸とは)

2001Y