1. /
  2. /
  3. positionを使ったボックスの中央配置

positionを使ったボックスの中央配置

positionを使用したボックスの中央配置の記述。

HTML記述例

<div class="box">
  <div class="box_inner">中央に表示したい内容</div>
</div>

CSS記述例

.box {
	position: relative;
}

.box_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

上記、box-innerについては下記でも同様の結果が得られます。

.box_inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

サンプルを確認する