Gridとは？
CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
CSS Grid Layout を極める！（基礎編） - Qiita
ということで、レイアウトを操作するにはとても便利なGrid。
Edge, Chrome, Firefox, Safari, Operaなどの主要ブラウザはほとんど対応しています。
Can I use... Support tables for HTML5, CSS3, etc
目指すイメージ
ほれ、ここにブラウザがあるじゃろ？
この要素を...
こう（HTMLに追加）して...
こう（中央揃え）じゃ！（雑
考え方
-
まず要素は
divかなんかでbackgroundを指定すればOK。 -
その
divの幅・高さは、コンテナを作ってmax-contentとやれば、そのコンテナもその大きさになるはず。 -
中央揃えにするには、ブラウザサイズから要素サイズを引いて2で割ったものが画像の青線部分になる。ざっとこのように。
-
ブラウザサイズ - 要素サイズは、要素サイズを指定すれば、余り1frで取得可能。
作る
<body>
<div class="container">
<p>Grid Centering Test.</p>
</div>
</body>
html{
margin: 0px;
padding: 0px;
}
body{
width: 100vw;
height: 100vh;
margin: 0px;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas:
". .... ."
". item ."
". .... .";
}
.container{
background: #ddd;
width: max-content;
height: max-content;
grid-area: item;
}
これで以下のようになりました。
ちゃんと中央揃えされています。
検証
では、サイズが変わったらどうなるのか。
つまり、コンテナのサイズやテキストが変わっても、コンテナごと中央揃えされたままなのか。
検証していきます。
検証用に、以下のコードを追加しました。
<!-- Check -->
<div class="fontsizeSlider">
<input type="range" min="1" max="100">
<textarea>Grid Centering Test.</textarea>
</div>
<script>
document.querySelector('.fontsizeSlider input').addEventListener('input',function(){
document.querySelector('.container p').style.fontSize = `${this.value}px`;
});
document.querySelector('.fontsizeSlider textarea').addEventListener('input',function(){
document.querySelector('.container p').innerText = this.value;
});
</script>
<!-- End -->
これは、スライダーでテキストのサイズ指定、テキストエリアでテキスト内容指定をして、変化するごとにリアルタイムでコンテナも変化するというものです。
では、検証しましょう。
（目視する限りは）中央揃えになったままですね。
成功です。
この結果が信じられないというなら、ご自身でお試しください。（極論）
このコードはこちらで公開しております。
https://github.com/a01sa01to/grid-centering
追記(2020.07.05)
1-Line Layouts こちらのページを見て知ったのですが、
こんなに大量のコードを記述しなくても display: grid と place-items: center で中央揃えできるようです。
Can I use...によると、ほとんどのブラウザで対応しているようです。
