サンプル-中央配置

中央配置の内容

幅・高さ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;
}