上下左右中央に要素を設置するCSSを紹介

Web制作において、いろいろな場面で上下左右中央にしたいということがある。

メインビジュアルをセンターにどーんと表示したい時、要素を並べた時、ロゴ画像をセンターにしたいとか、並べた時にガタガタにならないようにうまい具合に並べたいとか…。

上下左右中央にする方法はたくさんあるが、結構面倒な方法でやらざるを得ないこともある。要素を並べた時に２行になった場合に上下中央にするためにわざわざdisplay:table;で要素を囲って、中の要素をdisplay:table-cell;にしてvertical-align:middle;で上下中央にするなどが行われることもあるがかなりめんどい。

だが、やっとインターネットエクスプローラー（IE11）が消えたおかげで上下中央表示が無茶苦茶かんたんに出来るようになったのでここで紹介しておこうと思う。

上下左右中央のCSS・HTMLのサンプル

HTML
<div class="central"> <div style="width:70px;height:70px;background:#ccc;">中央</div> </div>
CSS
.central{ 　　display: grid; 　　place-content:center; 　　height: 100vh; }