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

141

こんにちは、画面の中央に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を表示すると画面に表示されません。表示するには下にスクロールする必要があります。

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

css  html  window  center 
— コーダー2
ソース
その正確なコードをテストページでテストしたところ、divがページの中央に完全に配置されまし<br />た。残りのコードをチェックして、DIVの値を上書きしているか、DIVに影響してこれらの問題を引き起こしていないかどうかを確認してください。
— Eli

回答:

269

追加するだけで、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;
}
— フセイン
ソース
1
あなたは...要素が適用され、スケール変換があっても簡単な解決策はうまく機能..命の恩人です
— ヴィニー
91

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

<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>
スニペットを展開

— ユーザー2684935
ソース
7
このアプローチは、承認された回答よりもはるかに優れています
— Viacheslav Dobromyslov
2
これは気に入りましたが、「古い」ブラウザで動作しますか？
— BernaMariano 14
14

変換を使用します。

<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");
— エルドアン
ソース
5

置くだけ 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

これを試してみてください。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— チャンダンシャルマ
ソース
1
これは、親要素にスタイルを適用する必要がないため、より便利だと思います。
— canbax
3 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

これは私のために働いた

— アブラハム
ソース
2
これは技術的には正しいかもしれませんが、これがコンテキストの問題を解決する理由の簡単な説明を含める必要があります
— drneel
2

短い答え、追加するだけでposition:fixed問題が解決します

— Parth
ソース
1 
<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>
— Maitrey Malve
ソース
質問はインタビューで私に尋ねた、「あなたは、画面のdivの中央を揃えるか？」
— Maitrey Malve
1

さて、以下はこのための作業例です。

これは、ウェブページのサイズを変更したり、任意のサイズでロードしたりした場合に、中心位置を処理します。

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

画面の中央または親タグにタグを配置する2つの方法：

ポジションの使用：

親タグpositionをに設定しrelative（ターゲットタグに親タグがある場合）、ターゲットタグのスタイルを次のように設定します。

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

フレックスの使用：

親タグのスタイルは次のようになります。

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
— アレックスジョリグ
ソース
0

urスクリプトページで...

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

Divで中間クラスを使用...

   <div class="a-middle">
— アントニー・ジャック
ソース
-1 

<!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>
スニペットを展開

— ランミン
ソース
-1

FLEXの使用 

display: flex;
height: 100%;
align-items: center;
justify-content: center;
— ASIR THERANS RAJA M
ソース
これにより、コンテンツが画面ではなく親要素またはページの中央に配置されます。
— ショーン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.