ウェブサイトのレイアウトをCSSで作成していくときに、使う場面も多いコンテンツのセンタリングですが、左右方向に対しては比較的わかりやすいですが、天地方向に対しては少しややこしいイメージがあります。さらにウインドウ（表示画面）内に対してのセンタリングとなると一筋縄ではいかないのではないでしょうか、、   今回は知っておくと何かと便利なウィンドウに対して中央にコンテンツを配置する方法をまとめてみたいと思います。 まずは左右方向と天地方向の各センタリング方法のおさらいから。  

左右方向にセンタリングする

【　text-align: center ;　】 画像やテキストなどインライン要素の中央揃え 【　margin: 0 auto ;　】 左右の均等余白を使ったブロック要素の中央寄せ  

天地方向にセンタリングする

【　line-height: ◯◯◯px ;　】 行間指定を使うことで一行テキストの場合、指定した数値の中央に配置される 【　padding: ◯◯◯px 0 ;　】 上下の余白を統一することで中央に配置する 【　vertical-align: middle ;　】 インライン要素の上下中央揃え 【　display: table-cell ;　＆　vertical-align: middle ;　】 テーブルのセルと同じ表示方法を使ったブロック要素の上下中央揃え   など、いろいろな方法が存在します。もちろんこれらは使用する場面によって使い分ける必要があります。 では次に左右と天地方向（＝表示ウィンドウ）に対してセンタリングする方法です。  

位置指定とネガティブマージンを用いた中央寄せ

positionプロパティとネガティブマージンを使ったセンタリングの方法です。しかし後述のとおり、幅と高さに対しての数値入力が必要ですのでセンタリングする要素のサイズが決まっている時にしか使えません。そして、親要素がセンタリングさせる子要素より小さい場合、はみ出して表示されるので使用できる場面は限られそうです。 ＜＜　ソースコード　＞＞

//HTML
<div class="wrap">
 <div class="centering_box">センタリングさせる要素
 </div>
</div>

//CSS
.wrap {
 position: relative;
}
.centering_box {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 400px;
 height: 300px;
 margin-left: -200px; //幅の1/2のサイズ
 margin-top: -150px; //高さの1/2のサイズ
}

  1. 全体を囲う親要素に『position: relative ;』を指定し、その子要素には『position: absolute ;』で親要素に合わせた絶対位置指定をします。   2. 子要素の位置指定に『left: 50% ;』で左右方向、『top: 50% ;』で天地方向に中央配置します。   3. 子要素の左上端がセンタリングされている状態ですので、子要素の幅と高さの1/2の数値をネガティブマージンに指定することでコンテンツ自体がセンタリングされます。  

ルート要素を基準にして0の位置指定とマージンautoを用いた中央寄せ

positionプロパティでルートの要素に基準を合わせた上で、marginの値をautoにしたセンタリングの方法です。ポイントとなるのはtop・bottom・left・rightの位置指定を統一し、四方からの余白を均等にしている点です。この方法はセンタリングする要素のサイズが決まっていない場合や包括する親要素がセンタリングさせる子要素よりも小さい場合でも使えるのでとても便利です。 ＜＜　ソースコード　＞＞

//HTML
<div class="wrap">
 <div class="centering_box">センタリングさせる要素
 </div>
</div>

//CSS
.centering_box {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: ◯◯◯px;
 height: ◯◯◯px;
}

  1. センタリングさせる要素に『position: absolute ;』を指定し、ルートの要素（＝ウィンドウ表示域）を基準に絶対位置指定をします。（親もしくは祖先ににあたる要素には位置指定がない場合）   2. top・bottom・left・rightそれぞれの位置指定を0として、margin: auto ; を設定する   ページ内で1つのコンテンツを効果的に見せることができるのがメリットです。CSSの基本的な知識だけでは難しいのでウィンドウに対してのセンタリングする方法は覚えておくと何かと使えるので便利ですね。