position: fixed;動的な幅と高さを持つ、画面の中央に配置されたポップアップ ボックスを作成したいと思いますmargin: 5% auto;。これには を使用しました。 を使用しないとposition: fixed;、水平方向には中央に配置されますが、垂直方向にはposition: fixed;中央に配置されません。 を追加した後、水平方向にも中央に配置されません。
完全なセットは次のとおりです。
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>CSS を使用してこのボックスを画面の中央に配置するにはどうすればよいでしょうか?
ベストアンサー1
div の幅と高さがわかっている場合は、基本的にtopと を設定して、div の左上隅を中央に配置するleft必要があります。また、と をdiv の高さと幅の負の半分に設定して、中心を div の中央にシフトする必要があります。50%margin-topmargin-left
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
または、div に動的/未定義の幅や高さがある場合は、 の代わりにmargin、 をtransformdiv の相対的な幅と高さの負の半分に設定します。
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
または、div に少なくとも固定幅があり、垂直方向の中央揃えをあまり気にしない場合は、代わりにのandを持つ要素にleft: 0と を追加して、固定幅を持つ固定位置の要素が左右のオフセットの開始位置を認識できるようにすることもできます。あなたの場合は次のようになります。right: 0margin-leftmargin-rightauto
position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;