web-dev-qa-db-ja.com

ページが画面よりも大きいときに画面中央にdivを配置する方法

こんにちは私は画面の中央に配置divを取得するために次のようなものに似たものを使用しています：

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

ただし、これに関する問題は、画面ではなくページの中央にアイテムを配置することです。そのため、ページの高さが数ページ上にあり、私がページの上部にいる場合（その部分の上部が画面に表示されます）、divを表示させても画面上には表示されません。表示するには下にスクロールする必要があります。

画面中央に表示する方法を教えてください。

csshtmlwindowcenter
129
Coder 2

position:fixedを追加するだけで、下にスクロールしても表示されます。 http://jsfiddle.net/XEUbc/1/ でそれを参照してください。

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
245
Hussein

これは簡単な解決策だと思います。

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>
79
user2684935

要素のサイズがわかっている場合は、単にmarginプロパティを使用できます。

#mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //assuming that #mydiv has the height of 100px
  margin-left: -100px; //assuming that #mydiv has the width of 200px
}

注要素の幅と高さの半分を使用する必要があることに注意

しかし、サイズがわからない場合は、これでうまくいきます。

#mydiv {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
46
Alex Jolig

変換を使用します。

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Javascriptソリューション：

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
11
Erdogan

margin:auto;を入れるだけ

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>
5
user3267423
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

これは私のために働きました

3
Abraham

簡単に言うと、position:fixedを追加するだけで問題が解決します。

2
Parth
<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
1
Maitrey Malve

まあ、以下はこれのための実用的な例です。

Webページのサイズを変更したり、anysizeを読み込んだ場合は、これが中心位置を処理します。

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

上記のサンプルでdivをロードすると、常に中央に配置されます。

これが役に立つのを願っています：）

1
Vikash Pandey

Urスクリプトページでは...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Divの中級クラスを使う...

   <div class="a-middle">
0
Antony Jack