左右・上下左右などCSSで要素やコンテンツの中央配置(中央寄せ)を実装する方法を備忘録も兼ねていくつか紹介します。 どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。 はじめに ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。 また、領域がわかりやすいように.childにはグレーの背景色を指定しています。 <div class="parent"> <div class="child">Lorem ipsum dolor sit amet.</div> </div>
![CSSでコンテンツの中央配置を実装する方法 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/04066b98415032b43a656e98ce8087062fa7a9dd/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fcss-centering-content.png)