web-dev-qa-db-ja.com

位置を中央に合わせる：固定要素

動的な幅と高さで画面の中央にposition: fixed;ポップアップボックスを作成したいと思います。これにはmargin: 5% auto;を使用しました。 position: fixed;がないと、水平方向には中心に配置されますが、垂直方向には配置されません。 position: fixed;を追加した後は、水平方向に中央揃えされていません。

これが完全なセットです。

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

このボックスをCSSの画面中央に配置するにはどうすればよいですか。

csscss-positioncentering
356
saturngod

Divの左上隅を中央に配置するには、基本的にtopとleftを50%に設定する必要があります。また、margin-topとmargin-leftをdivの高さと幅の負の半分に設定して、中心をdivの中央に移動する必要があります。

したがって、<!DOCTYPE html>（標準モード）を指定すると、これは以下のようになります。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

あるいは、IE6/7のように縦長で古いブラウザを中心に置かないのであれば、代わりにleft: 0とright: 0をautoに持つ要素にmargin-leftとmargin-rightを追加して固定位置の要素を固定幅にすることもできます。左右のオフセットがどこから始まるかがわかります。あなたの場合はこう：

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

繰り返しになりますが、これは、IEに関心がある場合はIE 8以降でのみ機能し、垂直方向ではなく水平方向にのみ中央揃えになります。

524
BalusC

動的な幅と高さで画面の中央にポップアップボックスを作りたい。

これは、動的幅を持つ要素を水平方向に中央揃えするための最新のアプローチです。これは、すべての最新のブラウザで機能します。 ここでサポートを見ることができます 。

更新された例 

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

垂直方向と水平方向の両方のセンタリングには、次のものを使用できます。

更新された例 

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

あなたは、より多くのベンダー接頭辞付きプロパティを追加したいと思うかもしれません（例を見てください）。

246
Josh Crozier

あるいは、left: 0とright: 0を元のCSSに追加するだけで、通常の固定されていない要素と同じように動作し、通常の自動マージン手法が機能します。

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

IEで正しく振る舞うためには有効な（X）HTML DOCTYPEを使う必要があることに注意してください（もちろんこれはもちろん持っているべきです！）

127
Will Prescott

以下のようなコンテナーを追加してください。

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

それからこのdivにあなたの箱を入れて作業を行います。

21
Romulus Urakagi Ts'ai

追加するだけです：

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
14
Bob

この解決策では、ポップアップdivに幅と高さを定義する必要はありません。

http://jsfiddle.net/4Ly4B/33/

そして、ポップアップのサイズを計算する代わりに、上からマイナス半分を計算する代わりに、javascriptはpopupContainerのサイズを変更して画面全体を埋めます...

（100％の高さ、display：table-cellを使うとうまくいきません。（縦に中央に配置するのに必要です））...

とにかくうまくいきます:)

5
BjarkeCK
left: 0;
right: 0;

IE7の下で働いていませんでした。

に変更

left:auto;
right:auto;

作業を開始しましたが、残りのブラウザでは動作しなくなりました。だから下のIE7にこのように使った

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
4
jatinder

基本的にそれを別のdivにラップし、そのpositionをfixedに設定できます。

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
2
Abdulla Dlshad

位置を固定するにはこれを使用してください - 

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
1
HeadAndTail

私はvw（ビューポートの幅）とvh（ビューポートの高さ）を使いました。ビューポートは画面全体です。 100vwは画面の全幅、100vhは全高です。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
1
Aseem
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

内部には、幅、高さの異なる要素、またはなしの要素を指定できます。すべてが中心にあります。

1
praffessorr

1つの可能な 答え ：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
0
Martin Vahi

正しく中央に配置されない水平方向の要素にこれを使用してみてください。

width：calc（幅：100％ - 幅が中心からずれているものは何でも ）

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

width: calc(100% - 200px);
0
Robert Ross