ページサイズに関係なく、ビューポートの中央に要素（div、モーダル/ダイアログボックス）を配置したいとします。要素をビューポートの中央に配置するにはどうすればよいですか？
ダイアログボックスは常に現在のビューポートの中央に表示されるため、ページサイズに関係なくユーザーが見ることができます。私の場合、たくさんのスクロールした非常に長いページがあります。ユーザーがページの下部にあり、ページの中央にダイアログボックスが表示されている場合、ビューポートには表示されないため、ユーザーは見ることができません。
私のHTMLサイトはiframeで実行されているため、タスクがさらに難しくなります。
どうすればいいですか？
このスニペットを試してください。
.modal{
width: 200px;
height: 150px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="modal">
</div>さて、あなたはページがiframeであり、私は、少なくともiframeの内側に要素を配置することは不可能であること、言うことができるという、質問を編集し、言及した後、ブラウザの現在のビューポートに移動します。要素の最も大域的な文脈はiframeであり、それが埋め込まれているものについては情報がありません。
ありがとうございます。それから私はそれができないことを知っている。 – Stefan
iframe自体を親ビューポートの中央に配置すると、モーダルもメインページの中央に表示されます。しかし、私は特定のケースでどのようにこれが可能であろうとは知らない。 –
CSS
.center{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
それは、ビューポートの相対だことを確認します固定位置以下に適用します。左と上の50％は要素の上と左を中央に移動します。あなたはそれが絶対的な中心にあることを望んでいます、それは変換によって行うことができます：translate（-50％、 - 50％）;
'position：absolute'または' position：fixed'であなたの運を試してください。 – lll
ポジションアブソリュートは、親に対して相対位置を決めたくないので動作しません。修正は、ページ全体ではなく、ビューポートの中央に配置するためにも機能しません。 – Stefan
これは 'position：absolute'のためのものです。明示的に親を 'relative'に設定しない限り、それを親要素から切り離します。 –