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; }