ダイアログボックスなどで使用するような幅指定せずに上下左右中心に配置にするセンターボックスのHTMLとCSSのコードです。
全体を「center-box__wrapper」のクラスで囲い、中心には「center-box」というクラスの中に書く。
・画面全体をrelativeに設定
・中心になる要素を絶対配置
・要素をtransformで中心に位置調整
<div class="centerBox">
<div class="centerBox__content">
<p>
センターボックスの中に入る要素です。<br>
センターボックスの中に入る要素です。<br>
センターボックスの中に入る要素です。<br>
センターボックスの中に入る要素です。<br>
</p>
<!-- /.centerBox__content --></div>
<!-- /.centerBox --></div>.centerBox{
background:#000;
height:100vh;
width:100vw;
display:block;
position:relative;
}
.centerBox__content{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.centerBox{
background:#000;
height:100vh;
width:100vw;
display:block;
position:relative;
&__content{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
}
