サンプル-中央配置

中央配置の内容

幅・高さ500pxのボックス内に、幅・高さ200pxのボックスを中央配置。

HTMLサンプルコード

<div class="box-center">
	<div class="box-center-inner">中央配置の内容</div>
</div>

CSSサンプルコード

.box-center {
	position: relative;
	width:500px;
	height: 500px;
	margin: 0 auto;
	background:#f5f5f5;
}
.box-center-inner {
	position: absolute;
	width: 200px;
	height: 200px;
	background:#00a3af;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	text-align: center;
}