web-dev-qa-db-ja.com

固定divのCSS水平センタリング？

#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（マージン上部）離れている必要があります。また、すべてのブラウザーサイズでページの中央に水平方向に配置し、ページの残りをスクロールするときに移動しないようにします。

それは可能ですか？

htmlcsscentering
159
matt
left: 50%;
margin-left: -400px; /* Half of the width */
163
Quentin

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

水平中心：

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

垂直中央：

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

水平および垂直の両方：

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

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

433
Maciej Krawczyk

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

.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

56
salomvary

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) */
}
26
Nick Rice

このように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
Denis V

もう1つの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)
}

このアプローチはクエンティンのアプローチに似ていますが、インナーのサイズは可変です。

5
Anonymous

...または、メニュー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
Meduza

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

<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
}
0
Vien Tang