web-dev-qa-db-ja.com

固定位置divの中央揃え

position:fixedセンターがページ上で整列しているdivを取得しようとしています。

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

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

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

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

これを修正して固定位置の要素を中央に揃える方法のアイデアはありますか？

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

htmlcenteralignmentcss-position
106
Kyle

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

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

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

162
Koen

Koenの答えは、要素を正確に中央に配置しません。

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

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

ワーキングjsfiddle比較 here 。

160
emzero

これにも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>
35
andreihondrari

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

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

これが役立つことを願っています。

31
Bhimbim

通常のdivはmargin-left: autoおよび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の反応に似ています。

7
Kevin

幅が400pxであることがわかっている場合、これが最も簡単な方法でしょう。

 left: calc(50% - 200px);
3
Daut

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

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

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

幅：calc（幅：100％-中心から外れた幅）

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

幅：calc（100％-200px）;

2
Robert Ross

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

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

つまり、固定位置の全幅エレメントを作成し、その中にコンテナーを押し込むだけで、コンテナーは全幅に対して中央に配置されます。応答性も良好です。

1
Barry Carlyon

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

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

0
maria

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

.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 */
}
0
Mubashar Abbas

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

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

child_div {
    /* whatever you want */
}
0
MarsAndBack
<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;}

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

0
JCBrown