【CSS】画像やテキストを縦横中央に配置する方法4つ

要素をブロックの縦横中央に配置するというシーンはたくさんあります。

横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。

そこで今回は「画像やテキストを縦横中央に配置する方法4つ」を確認していきます。

Contents

1 HTML
2 vertical-align: middle
- 2.1 CSS
3 position:absolute + transform
- 3.1 CSS
4 display:flex
- 4.1 CSS
5 top,bottom,left,right,width,heightがauto以外 + margin:auto
- 5.1 参考
6 まとめ

HTML

ベースとなる共通HTMLです。

<div class="box">
	<div class="inner">
		<div class="content">
			<h2 class="title">title</h2>
			<p class="text">
				content here
			</p>
		</div><!--content-->
	</div><!--inner-->
</div><!--box-->

「box」の中にある「inner」もしくは「content」をCSSで縦横中央に配置していきます。

vertical-align: middle

CSS

.box{
	background: #ed4343;
	display: table;
	height: 400px;
	text-align: center;
	width: 100%;
}
.inner{
	display: table-cell;
	vertical-align: middle;
}
.content{
	border: 1px solid #fff;
	display: inline-block;
	padding: 20px;
}

10行目　「vertical-align: middle;」が適用されるには「インライン要素」か「display:table-cell;」のどちらかである必要があります。

2行目　さらに「display:table-cell;」の場合は、親要素に「display: table;」が指定されている必要があります。

サンプル1

position:absolute + transform

CSS

.box{
	background: #ffb21d;
	height: 400px;
	position: relative;
	text-align: center;
}
.inner{
	left: 50%;
	position: absolute;
	top: 50%;
}
.content{
	border: 1px solid #fff;
	padding: 20px;
	transform: translate(-50%,-50%);
}

7,8,9行目　「inner」に「position: absolute;」を指定して、親要素の上からと左からそれぞれ50%(半分)の位置に移動します。

15行目　「inner」の中の「content」を「transform: translate(-50%,-50%);」を指定して要素の幅と高さの50％（半分）マイナス方向に移動（変形）させています。

サンプル2

display:flex

CSS

.box{
	background: #42c97e;
	height: 400px;
	position: relative;
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	
}

4つの方法の中で一番シンプルで簡単な方法です。縦横中央にしたい要素の親要素に「display: flex;」と「align-items: center;」を指定するだけでできてしまいます。子要素に幅も高さも指定する必要もありません。

サンプル3

「display: flex;」は比較的新しいプロパティーなので、各ブラウザの対応状況は確認した上で使用するのがベストです。
Can I use… Support tables for HTML5, CSS3, etc

flexboxの詳しい記事を書きました。

webdesignday.jp

【CSS】Flexboxの使い方を基本から徹底解説！レイアウトがとっても簡単に！

flexboxとはflexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在（2018年5月現在）では、ほとんどのブラウザにサポートされています。 flexboxの基本的な使い方それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。 flexコンテナーflexコンテナーは下記...

top,bottom,left,right,width,heightがauto以外 + margin:auto

.box{
	background: #489be1;
	height: 400px;
	position: relative;
	text-align: center;
}
.content{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 140px;
	margin: auto;
	border: 1px solid #fff;
	padding: 20px;
}

この方法が適用されるには下記の条件があります。