要素を親要素に対して縦横（上下左右）とも中央揃えする方法をまとめました。サンプルはそれぞれp要素と画像の2種類の子要素を中央揃えします。サンプルの上側がp要素、下側が画像です。

• （１）親要素に「display:flex」を使う
• （２）子要素に「position:absolute」を使う
• （３）親要素に「display:table-cell」を使う
• （４）子要素に「position:absolute」を使う古い方法

（１）親要素に「display:flex」を使う

どちらも親要素である「div class="sample1"」に「display:flex」を指定しています。4つのサンプルのうち、もっとも少ないコードで済みますが、古めのブラウザは対応を確認する必要があります。

htmlソース

<div class="sample1">
	<p>sample1</p>
</div>
<div class="sample1">
	<img src="img2/sample.png">
</div>

CSSソース

div.sample1 {
	/*---必要な部分以外は略します---*/
	display: flex;
	align-items: center;
	justify-content: center;
	}

 

（２）子要素に「position:absolute」を使う

どちらも子要素に「position: absolute」を指定しています。また、子要素のabsoluteのために、親要素には「position:relative」を指定しています。

htmlソース

<div class="sample2">
	<p>sample1</p>
</div>
<div class="sample2">
	<img src="img2/sample.png">
</div>

CSSソース

div.sample2 {
  /*---必要な部分以外は略します---*/
	position: relative;
	}
div.sample2 p,
div.sample2 img {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; 
	margin: auto;
	width:120px; //値は任意
	height:36px; //値は任意
	}

 

（３）親要素に「display:table-cell」を使う

親要素に「display:table-cell」を使って、縦方向の中央揃え用の「vertical-align: middle」を有効にさせます。p要素は「text-align:center」で、また、画像は「margin:0 auto」で横方向を中央揃えします。

htmlソース

<div class="sample3">
	<p>sample3</p>
</div><p></p>
<div class="sample3">
	<img src="img2/sample.png">
</div>

CSSソース

div.sample3 {
	display: table-cell; 
	vertical-align: middle; //縦方向の中央揃え
	}
div.sample3 p {
	font-size:24px; //値は任意
	text-align:center;
	} 
div.sample3 img {
	display:block; //横方向の中央揃えのためのmargin autoを有効にします
	margin:0 auto;
	}

 

（４）子要素に「position:absolute」を使う古い方法

どちらも子要素に「position: absolute」を指定しています。また、子要素のabsoluteのために、親要素には「position:relative」を指定しています。ここまでは（２）と同じです。子要素を上と左からそれぞれ50%のところに絶対配置し、子要素の縦と横サイズの半分をそれぞれ戻します。

htmlソース

<div class="sample4">
	<p>sample1</p>
</div>
<div class="sample4">
	<img src="img4/sample.png">
</div>

CSSソース

div.sample4 {
  /*---必要な部分以外は略します---*/
	position: relative;
	}
div.sample4 p,
div.sample4 img {
	width:120px; //値は任意
	height:36px; //値は任意
	position: absolute;
	top: 50%; 
	left: 50%; 
	margin-left: -60px;　//横サイズの半分戻す
	margin-top: -18px;　//縦サイズの半分戻す
	}