固定位置divを揃える中央

position:fixedページの中央に配置されたdivを取得しようとしています。

私は常にこの「ハック」を使用して絶対配置されたdivでそれを行うことができました

left: 50%; width: 400px; margin-left:-200px

...ここでmargin-leftの値はdivの幅の半分です。

これは固定位置のdivでは機能しないようです。代わりに、左端のコーナーを50％にして配置し、margin-left宣言を無視します。

これを修正して固定位置の要素を中央揃えにできるようにするためのアイデアはありますか？

そして、私が上記で概説した方法よりも、絶対配置された要素を中央に配置するより良い方法を教えていただければ、ボーナスM＆Mを投入します。

公園の答えは要素を正確に中央に配置するものではありません。

適切な方法は、CCS3 transformプロパティを使用することです。それはですが、いくつかの古いブラウザではサポートされていません。また、固定または相対を設定する必要さえありませんwidth。

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

ここで動作するjsfiddleの比較。

これと同じ問題を抱えているが、レスポンシブデザインの場合は、次のものも使用できます。

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

これを行うdivと、レスポンシブデザインでも、常に画面の中央に固定が維持されます。

これにはflexboxも使用できます。

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

上記の投稿から、私は最良の方法は

1. で固定divを持っています width: 100%
2. divの内部で、margin-left: autoandを使用して新しい静的divをmargin-right: auto作成するか、テーブルの場合はmakeを使用しalign="center"ます。
3. Tadaaaah、固定divを中央に配置しました

これがお役に立てば幸いです。

通常のdivではmargin-left: autoand を使用する必要がありますmargin-right: autoが、固定divでは機能しません。これを回避する方法は、Andrewの回答に似ていますが、非推奨の<center>ものを使用しません。基本的には、固定divにラッパーを指定します。

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

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

これにより、divがブラウザーと反応できるようにしながら、div内の固定divが中央に配置されます。つまり、十分なスペースがある場合、divは中央に配置されますが、スペースがない場合、ブラウザーの端と衝突します。通常の中央に配置されたdivが反応する方法に似ています。

垂直方向と水平方向の両方で固定位置divを中央揃えにしたい場合は、これを使用します

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

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

これは同じことをする必要があります。

幅が400pxであることがわかっている場合、これが最も簡単な方法だと思います。

 left: calc(50% - 200px);

これは、要素を別のナビゲーションバーのようにページ全体に広げたい場合に機能します。

幅：計算（幅：100％-中央揃え以外の幅）

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

幅：calc（100％-200px）;

幅を使用すると非常に簡単です：70％; 左：15％;

要素の幅をウィンドウの70％に設定し、両側に15％を残します

Twitter Bootstrap（v3）で以下を使用しました

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

つまり、固定位置の全幅要素を作成し、その中にコンテナーを押し込むだけで、コンテナーは全幅に対して中央に配置されます。応答も問題なく動作するはずです。

フレックスボックスを使用したソリューション。完全に応答：

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

ラッパーメソッドを使用しない場合。その後、これを行うことができます：

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}