位置を中央揃え：固定要素

438

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でこのボックスを画面の中央に配置するにはどうすればよいですか？

css  css-position  centering 
— 土星の神
ソース

回答:

605

あなたは基本的に設定する必要があるtopとleftの50%div要素の左上隅を中心に。また、設定する必要がありますmargin-topし、margin-leftdiv要素の中央に向かって、中心をシフトするの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 +でのみ機能し、垂直方向ではなく水平方向のみで中央揃えになります。

— BalusC
ソース
8
css-tricks.com/…でそのトリックを見つけました。しかし、幅と高さを変更すると、中心が移動しません。ええ、私は高さと幅を変更するときにマージン左と上部を変更する必要があります。
— saturngod
2
参考：これにより、中央に正しく配置されますが、残念ながらスクロールバーが失われます。固定位置はビューポートではなくビューポートに基づいているため、スクロールしても、ビューポートによって切り取られたコンテンツにはアクセスできません。ページ。これまでのところ、私が見つけた唯一の解決策はjavascriptを使用することです。
— Groxx、2011
3
Groxx オーバーフロープロパティを使用して、ポップアップのdiv内にスクロールバーを配置できると思います。
— David Winiecki
1
その上、これのためにあなたは要素の幅を知る必要があります。
— Hector Ordonez 2014年
2
ああ。nmその場合、私はもちろんブラウザのサイズが動的になることを意味します、なぜそれが問題であったのかわかりません。代わりに、ポップアップのサイズは動的である必要があると彼は思った。私の場合、変換を使用しているので、translate（-50％、-50％）; IE8以外ではうまく機能します。
— 2015年
323

動的な幅と高さのポップアップボックスを画面の中央に配置したい。

動的な幅を持つ要素を水平方向に中央揃えするための最新のアプローチを以下に示します-これはすべての最新のブラウザで機能します。ここでサポートを見ることができます。

更新された例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

垂直方向と水平方向の両方のセンタリングには、以下を使用できます。

更新された例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

ベンダーの接頭辞付きのプロパティを追加することもできます（例を参照）。

— ジョシュ・クロジエ
ソース
1
このアプローチを使用して、ウィンドウの幅よりも大きい固定位置の画像を水平方向に中央揃えし、現在のFirefox、Chrome、IE 11、およびEdgeバージョンで少なくとも正常に動作しています。
— jelhan
1
私のテストでは、これは非常にうまく機能します（プレフィックスの後ろ）、Win10 Edge 14、Win7 IE9 +、Win10 Chrome、OSX Chrome、iPad4 Chrome＆Safari、Android 4.4+ Chrome。私にとって唯一の失敗は、翻訳が行われなかったAndroid 4.0でした。
— ダンジャ2017年
2
@ahnbizcad、これはChrome 61、Safari 11、FireFox 65などのデスクトップブラウザーで機能しますが、Android 6のChrome 61では機能しません。承認された回答はすべてのブラウザーで機能します。
— エリックバーク2017年
5
これにより、Chromeで画像がぼやけます。
— Tomasz P. Szynalski 2018年
1
どういうわけか、私のimgを使用してすべてのブラウザーで適切に機能するアプローチのみ。本当にありがとう！
— Kugelfisch
136

それとも追加left: 0し、right: 0それが通常の非固定要素と通常の自動マージンの技術の作品と同様に動作しますあなたのオリジナルのCSSに：

.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を使用する必要があることに注意してください（もちろん、当然のことですが！）。

— プレスコット
ソース
2
どのような意味で？親要素はbody要素で、境界線はありません。ボーダープロパティをボディ（？！）に追加した場合、私が想像する50％のテクニックと同様に、確実に影響を受けます。特定のパラメーターで問題なく機能し、手元にあるすべてのブラウザーで検証され、要素の幅に依存しないという追加の利点があることを保証します。
— プレスコット
5
私がしたのは、これら2つのプロパティとdoctypeをOPのサンプルHTMLに追加することだけでした。ただし、さらにテストすると、IE7（または互換モードでは8）が問題のようです- も設定されているright場合、プロパティの値は考慮されませんleft。（msdn.microsoft.com/en-us/library/…は、IE7では「部分的」なサポートのみであることを指摘しleftてrightいます）。OK、IE7のサポートが重要な場合、このソリューションは良くないと思いますが、将来のために覚えておかなければならないすばらしいトリックです:)
— Will Prescott
7
これは受け入れられる答えになるはずです。2つの固定位置があり、1つは不透明マスク用、もう1つはモーダル用です。これは、固定位置モーダルを画面の中央に配置できる唯一の方法でした。誰が考えたでしょうか？
— クリスホークス
3
私は同意します、これは受け入れられた答えであるべきです。幅に依存しないため、レスポンシブデザインでも完璧に機能します。
— Hector Ordonez 2014年
7
一部のcssはOPにのみ関連するため、答えを簡略化することをお勧めします。必要なのは位置だけです。左：0; 右：0; マージン：0自動; 。
— Hector Ordonez
23

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

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

次に、このdivにボックスを入れて作業を行います。

— ロムルス浦上ツァイ
ソース
"text-align：center"は、内部のdivを中央に配置するときに機能しませんでした。
— nima
2
display: inline-blockこれを機能させるには、内部ボックスが必要です。（table。など、他のいくつかの表示値も機能する場合があります。）
— Brilliand
上記のcssへのより良いアプローチは、またはにmargin:auto;幅を追加および変更することです。その場合、コンテンツはストレートテキスト、ブロック要素、またはインライン要素にすることができます。width:50%width:400px
— Joshua Burns
20

追加するだけです：

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— ボブ
ソース
1
これはで機能しません。これがposition: fixed問題です。私が間違っている場合は、回答を編集して実行可能なコードスニペットを含めてください。
— Flimm
1
位置が固定されているとうまく機能します。
— Phuhui、
1
要素にまたはをposition: fixed設定すると、で機能します。max-widthwidth
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

内部には、幅、高さの異なる要素を含むことができます。すべて中央揃えです。

— praffessorr
ソース
5

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

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

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

（100％の高さ、display：table-cellを使用する場合は機能しません（これは何かを垂直方向に中央に配置するために必要です））...

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

— BjarkeCK
ソース
4 
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'});
}
— ジャタンダー
ソース
解答全体を含めるために回答を編集してもよろしいですか？
— Flimm
これは、左側と右側に自動マージンがないと機能しません。
— RoM4iK
2

あなたは基本的に別のものにそれをラップすることができdiv、その設定positionにしますfixed。

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
スニペットを展開

— アブドゥラドゥシャド
ソース
2

私が使用vw（ビューポート幅）及びvh（ビューポートの高さ）。ビューポートは画面全体です。100vw画面の全幅と100vh全高です。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— アシーム
ソース
1

位置を修正するには、これを使用します。

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— HeadAndTail
ソース
3
投稿された質問に対してソリューションが機能する理由を説明してください。
— シェカールチカラ
0

考えられる答えの 1つ：

<!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>
— マーティン・ヴァヒ
ソース
これは機能しているように見えますが、要素の幅と高さを知っている必要があります。
— Flimm 2018
0

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

幅：計算（幅：100％- 幅が中央揃えされていない場合の幅）

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

width: calc(100% - 200px);
— ロバート・ロス
ソース
0

私はこのようなものを使うだけです：

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

これは、ダイアログボックスを水平方向と垂直方向の両方で中央揃えにします。メディアクエリを使用すると、さまざまな幅と高さを使用してさまざまな画面解像度に合わせて応答性を高めることができます。

CSSカスタムプロパティcalc()がサポートされていない、またはサポートされていないブラウザーのサポートを提供する必要がある場合は、オプションではありません（caniuseを確認してください）。

— ファビアン・スナウワート
ソース
0

これは私にとって最もうまくいきました：

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
ソース
-13

唯一の確実なソリューションは、次のようにテーブルalign = centerを使用することです。

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

divを中心とするような根本的な問題を解決するために、世界中の人々がこれらの膨大な量を愚かな時間に費やしているとは信じられません。cssソリューションはすべてのブラウザで機能するわけではありません。jqueryソリューションはソフトウェア計算ソリューションであり、他の理由でオプションではありません。

テーブルの使用を避けるために繰り返し時間を無駄にしましたが、経験上、それとの戦いをやめるように言われました。divの中央揃えにテーブルを使用します。すべてのブラウザで常に機能します！もう心配する必要はありません。

— 清
ソース
11
これはまったく質問に答えません。に相当する非CSSはありませんposition:fixed。
— ブリリアント
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.