BinaryDevelop
  1. ホーム
  2. css

[解決済み】position:fixed要素をセンタリングする。

2022-03-23 23:45:06

質問

を作りたいのですが 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で画面中央に配置するには？

解決方法は？

基本的には top と left から 50% で、divの左上隅を中央に配置します。また margin-top と margin-left を div の height と width のマイナス半分に設定することで、中心を div の真ん中に移動させることができます。

このように <!DOCTYPE html> (標準モード)であれば、これでよいでしょう。 

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

また、IE6/7などの古いブラウザや縦方向の中央揃えを気にしないのであれば、代わりに left: 0 と right: 0 を持つ要素に margin-left と margin-right の auto そうすれば、固定幅で配置された要素は、その左右のオフセットがどこから始まるかを知ることができます。あなたの場合はこうです。 

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

繰り返しになりますが、IE を気にするのであれば、これは IE8+ でのみ動作します。また、これは水平方向のみで、垂直方向にはセンタリングされません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します