2

ページの中央にモーダルボックス（この場合は確認ボックス）を配置しようとしています。そこで、メインコンテナの位置を相対位置に設定してから、次のCSSコードを使用してモーダルボックスのdiv要素を配置しました。

.confirmBox{
    top:25%;
    left:25%;
}

上と左の属性の値を調整しました。これは低ズームでは問題なく機能しますが、ズームインするとボックスがページの中央に表示されません。CSSを使用してこれを解決するにはどうすればよいですか？

元のコードは実際には大きく、この場合のインスタンスを考えることはできません。それでも、class = "confirmBox"のdiv要素をconfirmBoxのコードと見なし、フィドルhttp://jsfiddle.net/W6ATN/47/をアタッチしています。

4

2 に答える 2

4

左右の50％の位置を使用してから、幅と高さの半分を引いて要素のサイズを補うことができます。

position:absolute;
top:50%;
height: <your value>px;
margin-top: (negative value of your height, divided by 2);
width:<your value>px;
left:50%;
margin-left: (negative value of your width, divided by 2);

この方がわかりやすいと思います。要素の幅が（コンテナの）40％の場合、均等に中央に配置するには、左に30％にする必要があります。

|-----30%-----|-------40%--------|-----30%-----|

すべて==100％

または

％widthと％heightを使用し、簡単な計算を使用して左右の位置を計算できます。

position:absolute;
height:40%;
width:40%;
left:30%; // (100 - width) divided by 2
top:30%; // (100 - height) divided by 2
于 2012-12-19T20:12:30.387 に答える
0 
// Slightly modified custom css with all due credit to it's previous owner  
//
//           @@ Cat...

.vertical-align-center {

left: 0%; // <<<------ Align left and comfortably stretch across the screen
display: table-cell;
vertical-align: middle pointer-events: none;
}
于 2018-03-02T15:16:25.173 に答える