153

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

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

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

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

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

これを修正して、固定配置された要素を中央揃えにする方法についてのアイデアはありますか?

また、上で概説した方法よりも、絶対位置に配置された要素を中央揃えにするより良い方法を教えていただければ、おまけの M&M を追加します。

4

16 に答える 16

171

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

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

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

于 2012-05-17T14:58:21.307 に答える
53

これにもフレックスボックスを使用できます。

.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>

于 2012-04-13T20:09:25.717 に答える
37

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

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

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

于 2012-05-17T00:05:42.427 に答える
7

水平方向に中央揃えにします:

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));

水平方向と垂直方向の中央に配置します (高さが幅と同じ場合):

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

副作用なし: フレックスボックスでマージンを使用する場合、要素の幅を制限しません

于 2021-01-13T00:42:41.387 に答える
4

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

 left: calc(50% - 200px);
于 2016-11-09T12:52:08.870 に答える
1

width: 70%; を使用すると非常に簡単です。左:15%;

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

于 2013-12-13T03:30:13.100 に答える
1

の従来のアプローチで.center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }は、中央に配置された要素の周囲に空きスペースを確保しようとするため、中央に配置された要素の幅が本来あるべきサイズよりも小さくなるなど、理想的ではなくなります。

@proseosocの回答はそのシナリオでうまく機能し、中央の要素の範囲をビューポート側の端まで拡張します。ただし、中央揃えの要素は、スクロールバーを含むビューポート全体の中央に配置されます。ただし、ユースケースでスクロールバーなしでスペース内の要素を中央に配置する必要がある場合は、この変更された回答を使用できます。このアプローチは、スクロールバーを使用せずに要素を空間の中央に配置する前述の従来のアプローチにも似ています。

左右中央揃え

.horizontal-center {
    position: fixed;
    left: calc((50vw - 50%) * -1); /* add negative value equal to half of the scrollbar width if any */
    transform: translate(calc(50vw - 50%));
}

垂直方向に中央揃え

.vertical-center {
    position: fixed;
    top: calc((50vh - 50%) * -1);
    transform: translate(0, calc(50vh - 50%));
}

水平方向と垂直方向の中央揃え

.center {
    position: fixed;
    left: calc((50vw - 50%) * -1);
    top: calc((50vh - 50%) * -1);
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}
于 2021-11-14T15:43:50.250 に答える
-1

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

.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 */
}
于 2019-07-08T16:23:55.573 に答える