CSSでセンタリング 画像や文章を中央寄せにする方法

ブログのカスタマイズやサイト制作をしていて、コンテンツを真ん中に揃えるレイアウトはよく使いますね。
画像や文章を中央寄せ（中央揃い）にする方法をまとめてみました。

はじめに　インライン要素とブロック要素

HTML5においてブロック要素とインライン要素という概念は廃止されましたが、CSSの扱いとしては残っています。
要するにHTML5においては、セマンティックな意味付けはHTMLタグで行い、スタイルシートで見た目やレイアウトを規定するという方向性が一層明確になったんですね。

ブロック要素（初期値display:block;）

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、p要素の中のstrong要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

参考：ブロックレベル要素とインライン要素－HTMLの基本

インライン要素のセンタリング

インライン要素のセンタリングは基本的にtext-align:center;です。

See the Pen text-align: center; by Minimal Green (@syofuso) on CodePen.

テキストは左揃い、コンテンツは中央寄せにしたい場合

text-align + inline-blockを組み合わせることで以下のように表現できます。

See the Pen display: inline-block; text-align: left; by Minimal Green (@syofuso) on CodePen.

上下左右中央 height+line-height

text-align:center;さらにheightの値とline-heightの値を同じに指定することで上下左右中央に配置されます。（一行に収まるテキストのみ）

See the Pen line-height: by Minimal Green (@syofuso) on CodePen.

ブロック要素のセンタリング

widthを指定し、左右のmarginをautoにすると中央配置されます。

See the Pen margin:0 auto by Minimal Green (@syofuso) on CodePen.

上下左右中央 position:relative;+position:absolute;+margin:auto;

親要素にposition:relative;子要素にposition:absolute;と指定し,margin:auto;でtop,bottom,left,rightそれぞれにauto以外の値(ここでは0)を指定しています。
子要素に幅と高さの指定が必要になります

See the Pen position:relative; by Minimal Green (@syofuso) on CodePen.

position: absolute; margin:autoで上下左右中央配置される理由についてはこちらの記事で詳しく説明されています。
position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

table-cellを使う方法

親要素にdisplay: table;子要素にdisplay: table-cell;を指定することで、text-align: center;とvertical-align: middle;が効き、上下左右の中央配置ができます。

See the Pen line-heignt by Noriko Tanioka (@syofuso) on CodePen.

flexboxを使う方法

flexboxを使う方法もありますが、現状では使えるブラウザのバージョンに制限があるため、なかなか実装はしにくいです（個人的には）。
【JSいらず】CSS3 のFlexbox を使った、イマドキの上下中央配置レイアウト ｜ Tips Note by TAM

はてなブログでの中央寄せ

ちなみにはてなブログでは

<div class="center">この中に記述する</div>

これで中央寄せができます。
はてなブログの共通のCSSに以下のように記述されているため、はてなブログではこれでセンタリングできます。

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}