2

私はconfirmBoxを配置するために、相対配置の中に絶対配置を使用していました。ページは多くのコンテンツで構成されているため、ページの高さが非常に大きくなっています。confirmBox はページの中央に配置されますが、画面の中央には配置されません。confirmBox は Web ページ上の複数のリンクから複数のポイントで開くことができるため、confirmBox を画面の中央 (ページの中央ではなく) に配置する必要があります。どうすればそれを達成できますか？

CSS

#confirmBox {
background:#fff;
border:1px solid #80686f;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px #766A65;
 -moz-box-shadow:0 8px 6px -6px #766A65;
box-shadow: 0 8px 6px -6px #766A65;
font-size:15px;
height:217px;
position:absolute;
text-align:center;
z-index:109;
width:400px;
top:50%;
left:50%;
margin-top:-108px;
margin-left:-200px;
}

HTML

<div style="position:relative">
<div id="confirmBox">
</div>
</div>
4

2 に答える 2

2

絶対ではなく「固定」を使用してみてください

于 2013-01-05T08:45:57.220 に答える
1

fixedの代わりに使用するとabsolute、absoluteを使用してページ全体の中央に要素を配置することはできません。このCSSを確認してください。上|右|下|左* 0px *を指定すると、ボックスが水平方向と垂直方向の両方の中央に表示されます。

#confirmBox {
border:1px solid #80686f;
height:217px;
position:fixed;
text-align:center;
z-index:109;
width:400px;
margin:auto;
left:0px;
right:0px;
bottom:0px;
top:0px;
}

Fiddle：JsFiddleが機能していない場合は、JsBinの例（出力）http://jsbin.com/uxafal/1/を確認してください 。コードを表示するにはhttp://jsbin.com/uxafal/1/edit

于 2013-01-05T09:02:19.103 に答える