css - 位置を中央揃え:固定要素

Question

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 で画面の中央に配置するにはどうすればよいですか?

score 706 · Accepted Answer

基本的に、div の左上隅を中央に配置topするように設定leftする必要があります。また、とを div の高さと幅の負の半分50%に設定して、中心を div の中央に移動する必要があります。margin-topmargin-left

したがって、<!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 などの古いブラウザーを気にしない場合は、代わりに and を持つ要素に and を追加してleft: 0、固定幅を持つ固定配置要素がその左と右オフセットが開始されます。したがって、あなたの場合：right: 0margin-leftmargin-rightauto

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+ でのみ機能し、これは垂直方向ではなく水平方向にのみ中央に配置されます。

score 142 · Accepted Answer

left: 0または、元の CSS にandを追加するだけright: 0で、通常の固定されていない要素と同様に動作し、通常の自動マージン手法が機能します。

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

DOCTYPEIEで正しく動作するには、有効な（X）HTMLを使用する必要があることに注意してください（もちろん、とにかく持っている必要があります..！）

score 30 · Accepted Answer

次のようなコンテナを追加します。

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

次に、ボックスをこの div に配置すると、作業が行われます。

編集: コメントで述べたように、次のような 2 つの div があると仮定して、内部コンテンツを設定する必要がdisplay: inline-blockあります。

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

次に、内部の CSS は次のようにする必要があります。

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

a を持つ外側の div とともに、left: 0; right:0;これtext-align: centerにより、内側の div の幅を明示的に指定せずに、内側の div が中央に配置されます。

score 11 · Accepted Answer

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

その内部には、diffenet の幅、高さの有無にかかわらず、任意の要素を指定できます。すべてが中心です。

score 5 · Accepted Answer

left: 0;
right: 0;

IE7 では動作しませんでした。

に変更

left:auto;
right:auto;

動作を開始しましたが、残りのブラウザーでは動作しなくなりました! したがって、以下のIE7ではこのように使用されます

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

score 5 · Accepted Answer

このソリューションでは、ポップアップ div の幅と高さを定義する必要はありません。

http://jsfiddle.net/4Ly4B/33/

そして、ポップアップのサイズを計算する代わりに、上から半分を引いて、javascript は popupContainer のサイズを変更して画面全体を埋めます...

(高さ 100%、display:table-cell; を使用する場合は機能しません) (何かを垂直方向に中央揃えする必要があります)...

とにかくそれは動作します:)

score 0 · Accepted Answer

正しく中央に配置されない水平要素にこれを使用してみてください。

width: calc (幅: 100% -中心から外れた幅)

たとえば、サイドナビゲーションバーが 200px の場合:

width: calc(100% - 200px);

score 0 · Accepted Answer

One possible answer:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

score 0 · Accepted Answer

この問題があったので、（目に見えない）コンテナを使用することが最良の選択肢であると結論付けました（回答@Romulus Urakagi Ts'aiに基づく）。フレックスボックスで作成するには:

.zoom-alert {
  position: fixed;
  justify-content: center;
  display: flex;
  bottom: 24px;
  right: 0;
  left: 0;
  z-index: 100000;
  width: 100%;

  &__alert {
    flex: 0 0 500px;
    padding: 24px;
    background-color: rgba(212, 193, 105, 0.9);
    border: 1px solid rgb(80, 87, 23);
    border-radius: 10px;
  }
}

(構文は SCSS ですが、純粋な CSS に簡単に変更できます)

score 0 · Accepted Answer

これは、中央に配置するもののサイズがわからず、すべての画面サイズで中央に配置したい場合に素晴らしく機能します。

.modal {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;           /* (100 - height) / 2 */
  left: 5%;          /* (100 - width) / 2 */
}

css - 位置を中央揃え:固定要素

21 に答える 21

Related

Reference