中央配置の内容
幅・高さ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; }