固定divのCSS水平方向の中央揃え?


183
#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

私はこの質問が100万回あることを知っていますが、私の問題の解決策を見つけることができません。私はdivを持っています、それは画面で修正されるべきです、ページがスクロールされたとしても、それは常に画面の中央に中央に留まるべきです!

divには500px幅があり、30px上(マージン-トップ)から離れている必要があり、すべてのブラウザーサイズでページの中央の水平方向の中央に配置され、残りのページをスクロールするときに移動しないようにする必要があります。

それは可能ですか?


回答:


167
left: 50%;
margin-left: -400px; /* Half of the width */

25
ブラウザウィンドウのサイズを変更すると、意図したとおりに機能しません。

3
@Bahodir:よろしいですか?サイズを変更すると、私には正しく見えます。これ-400は、divの幅がに設定されているためだと思います 800
Merlyn Morgan-Graham

1
@PrestonBadeer —質問が尋ねているようなものですか?
クエンティン

3
完全に同意します-これは解決策ではありません!この方法で何かをハードコードしないでください。-1
ネイトI

3
私はこれを投票に落としましたが、それはその日の悪い答えだったからではありません-良い答えでしたが、今はそうではなく、次に高い答えが最良の答えと見なされるために必要なすべての助けを必要とするからです今。クエンティン:回答自体でその効果をコメントで編集するのは良い考えだと思います-その後、反対票を投じます。
Nick Rice

547

ここでの答えは時代遅れです。これで、マージンをハードコーディングすることなく、CSS3変換簡単に使用できます。これは、幅のない要素や動的な幅の要素を含むすべての要素で機能します。

水平中心:

left: 50%;
transform: translateX(-50%);

垂直中心:

top: 50%;
transform: translateY(-50%);

水平と垂直の両方:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

互換性は問題ではありません:http : //caniuse.com/#feat=transforms2d


86
+1この回答は、stackoverflowの問題を示しています。その日は良かったが正しく受け入れられた古い回答は誇らしげに座って、まだ適切であるという印象を与えることができますが、このような新しい世界のすばらしい回答は、オッズとの戦い。
Nick Rice

10
@NickRice 100%同意。この答えは、新しく受け入れられた答えでなければなりません。ジュニア開発者は、現在受け入れられている答えを見ることさえすべきではありません!
ネイトI

2
@matt代わりにこれを受け入れてください。これを見るには、遠くまでスクロールしてください。
ssbb

4
これにより、コンテンツ要素のボックスシャドウにぼかし効果が適用されます。
2016

4
はい、Chromeは変換されたコンテンツを誤ってぼかします。テキストもぼやけています。しかし、これは、ハードコーディングせずにラッパー要素を使用せずに固定要素を中央に配置する唯一のソリューションです。背景のポインターイベントを気にしない場合は、全画面ラッパーとフレックスボックス、または以下の@salomvaryのソリューションで同じ効果を得ることができます。
Maciej Krawczyk 2016

58

インラインブロックを使用するオプションがある場合、このアプローチをお勧めします。

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

これに関する短い投稿をここに書きました:http : //salomvary.github.com/position-fixed-horizo​​ntally-centered.html


1
10x、これはwidth、@ Quentinsの回答とは異なり、何らかの数値をハードコーディングする必要がない私にとってはうまく機能しました
Yatharth Agarwal

30

2016年9月を編集します。これについては時々賛成票をもらうのは良いことですが、世界は進んでいるため、変換を使用する(そして多数の賛成票を持っている)答えを使用します。私はもうこの方法でそれをするつもりはありません。

マージンを計算したり、サブコンテナを必要としたりしない別の方法:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

@Joey下:0は何をしますか?つまり、なぜそれが必要なのですか?(私がこれを見てからしばらく時間が経ちます!)
Nick Rice 14

bottom:0メニューが常に垂直方向に中央揃えになるようにしますが、OPが求めていたものではないことがわかりました。:)
ジョーダンH

私は、要素の高さは、窓(ビューポート)の高さよりも高い場合、それはFFでセンターをしません考え出しBYT異なる文脈でこれを使用しようとした
フィリップWerminghausen

世界が進んだので、今度は変換を使用する答えを選びます。(私は以前にこのコメントを作成しましたが、回答者が使用した名前を参照しました-彼らはその名前を変更したので、私のコメントは意味をなさなくなったので削除しました-代わりにこのページを検索して変換してください。)
Nick Rice

7

この方法でdivを水平方向に中央揃えにすることが可能です。

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

この方法を使用すると、常に内部ブロックが中央に配置されます。さらに、真のレスポンシブに簡単に変えることができます(例では、小さな画面では単に流動的です)。そのため、質問の例や選択した回答に制限はありません。 。


5

...または、メニューdivを別のdivでラップできます。

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

5

これが別の2 divソリューションです。ハードコーディングせずに簡潔にしようとしました。まず、期待できるhtml:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

次のcssの背後にある原則は、「外側」の一部の側を配置し、「内側」のサイズを想定していることを使用して、後者を相対的にシフトすることです。

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

このアプローチはQuentinのアプローチに似ていますが、innerは可変サイズにすることができます。


-1

全画面ラッパーdivを使用する場合のflexboxソリューションを次に示します。justify-contentはその子divを水平方向に中央揃えにし、align-itemsはそれを垂直方向に中央揃えにします。

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.