上下左右の中央寄せ（中央揃え）まとめ覚書

どうしても、忘れてしまって、毎回調べる事になって無駄な時間を使うので、まとめ覚え書き。

まずは基本から

text-align:center

text-align:center;
この文章はダミーです。
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。

この場合内側の領域の幅は内側の内容の量（幅）によって変わる。
内側の内容が外側の領域の幅より大きくなれば一杯に広がった状態になってしまう。

外枠　padding:3em 6em;

text-align:center
この文章はダミーです。
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。

width:指定値;
margin:auto;

width:50%;
margin:auto;

margin:autoによる領域の中央寄せは、左右方向にしか効きません。

※よく、「 margin:0 auto; 」という書き方をすると解説されていますが、「0」の部分は 0 以外でも設定した値で描画されます。ただ、縦方向の中央位置には来ないので、事実上、上部のマージンのみ(下部マージンは無視される)という事になりますね。

width:50%;
margin:10px auto;

ここからがFAQの覚え書き

縦方向（上下方向）に中央寄せする方法

vertical-align:middle;(古典的でストレートな力技？）

<table>
 <tr><td>
  <div style="width:50%;margin:auto;">width:50%;<br />margin:auto;</div>
 </td></tr>
</table>

width:50%;
margin:auto;

外枠 display:table;width:100%;

display:table-cell;width:100%;

display:inline-block;
width:50%;

注意点は、table-cellを単独で使わず、外側にtableを指定した領域を作ること。
単独で使用すると、親領域の幅が不明なので幅を％で指定できない（固定値なら使えるけれど多分正しい使い方ではない）

これが一番今風でスマートかも？

親領域にflex、justify-content、align-items を設定するだけ

display:flex;
justify-content:center;
align-items:center;

つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を

※Flexboxなら複数の子要素を均等に並べたりもできますので便利ですね
⇒ Flexbox 16 (justify-content／align-items／align-contentの違い)

親要素 position:relative、子要素　position:absolute
top:50%;
left:50%;
transform: translate(-50%, -50%)

つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。

※ top と left で子要素の開始位置を親要素の 50% の位置に移動し、translate で子要素の大きさの 50% 分、位置を戻している。

translate は CSS3 で追加された機能なので、少し古いブラウザでは対応していない可能性があります。

関連記事

⇒ Flexboxの子要素の位置調整まとめ