0

青いボックスの作り方は常に赤いボックスの真ん中に表示されます。ウィンドウのサイズを変更すると、青いボックスの位置が間違っています。オンラインサンプル： http： //jsfiddle.net/NVjPF/ 。ありがとう

<div id="box1">
    <div id="box2"></div>
</div>

#box1{
display: block;
background:red;
background-size: 100%;
position: relative;
padding-bottom: 60%;
}

#box2{
    display:block;
    background:blue;
    position:absolute;
    height:70px;
    width:70px;
    right:50%;
    top:50%;
  }
4

4 に答える 4

5

他の人が述べたように、あなたは追加する必要があります

margin:-35px -35px 0 0;

ボックスが正しく中央に配置されるようにします。画面サイズは関係ありません。ボックスの真ん中に真ん中に配置されることはありません。これは、ブラウザがボックスの右上隅を取得し、それをボックスの中央に配置しているためです。したがって、ある意味では、ボックスは中央に配置されます。left:50%;ボックスをの代わりにに設定するとright:50%;、ボックスは左上隅の中央に配置されます。したがって、この問題を修正するには、幅と高さの半分を使用します。これは、ボックスの中心に等しくなるためです。

また、赤いボックスから抜け出すボックスを説明するために、overflow:auto;必要に応じてスクロールバーを作成するために追加しました。スクロールバーが必要ない場合は、に変更できますoverflow:hidden。突起が必要ない場合は、どちらでも機能します。

http://jsfiddle.net/burn123/NVjPF/3/

于 2013-03-04T04:32:23.717 に答える
2

差を説明するために負のマージンを使用できます。この場合、次を追加できます。

margin-right: -35px;
margin-top: -35px;

ステムは、内側の要素の35px半分のサイズに由来します。ライブデモについては、http：//jsfiddle.net/NVjPF/1/を参照してください。

于 2013-03-04T04:00:58.757 に答える
2

これを試して。基本的に、ボックスを親の内側の半分まで移動してから、ボックスの幅と高さの半分に等しい負のマージンを使用して、ボックスをデッドセンターに戻します。

#box2 {
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin:-35px -35px 0 0;
}
于 2013-03-04T04:01:52.240 に答える
2

それを試してみてください、私にとってはうまくいきます：

#box2 {transform: translate(-50%, 0%);}
于 2016-01-29T10:26:07.207 に答える