iiIDEA(ｲｲｱｲﾃﾞｱ)

https://www.shime.co/

↑例えばこのサイトのように、画像やテキストを親要素のど真ん中に配置したいケースは多いと思います。
今まではposition:absoluteとwidth:autoで位置指定していましたが、もっと簡単にできる方法を見つけたのでシェアします。

箱の部分が.parent、画像が.childと仮定します。
親要素である.parentに以下の2行を追加するだけです。

.parent {
display: grid;
place-items: center;
}

これだけで、親要素の上下左右に配置することができました！

ちなみに従来のposition:absoluteで位置指定するやり方だと、こうなります。
親要素も子要素もwidthとheightを指定しなければならないので、レスポンシブする時に調整しなければならないことが多くすごく不便でした。

.parent {
position: relative;
width: 800px;
height: 400px;
}

.child {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

ただplace-items: center;　が使えないケースもあるかもしれないので、色んなやり方を覚えておくといいかもしれません。