wake-up-neo.net

Wie positioniert man ein Div in der Mitte des Bildschirms, wenn die Seite größer als der Bildschirm ist?

Hallo, ich verwende etwas Ähnliches, um ein Div in der Mitte des Bildschirms zu positionieren:

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

Das Problem dabei ist jedoch, dass der Artikel in der Mitte der Seite und nicht auf dem Bildschirm positioniert wird. Wenn also die Seite ein paar Bildschirme hoch ist und ich mich oben auf der Seite befinde (der obere Teil des Teils wird auf dem Bildschirm angezeigt), wenn das Div angezeigt wird, erscheint es nicht einmal auf dem Bildschirm. Sie müssen nach unten scrollen, um es anzuzeigen.

Kann mir jemand bitte sagen, wie er in der Mitte des Bildschirms erscheinen würde?

124
Coder 2

fügen Sie einfach position:fixed hinzu, und es bleibt auch dann sichtbar, wenn Sie nach unten scrollen. siehe unter 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;
}
239
Hussein

Ich denke, das ist eine einfache Lösung:

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

77
user2684935

Wenn Sie die Größe des Elements kennen, können Sie einfach die margin-Eigenschaft verwenden:

#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
}

Hinweis dass Sie die halbe Breite und Höhe des Elements verwenden sollten

Wenn Sie sich der Größe jedoch nicht sicher sind, wird dies der Trick sein:

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

Verwende transform;

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

Javascript-Lösung:

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

Geben Sie einfach margin:auto;.__ ein. 

#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;

Das hat bei mir funktioniert

3
Abraham

Kurze Antwort, fügen Sie einfach position:fixed hinzu und das wird Ihr Problem lösen

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

Nun, unten ist das Arbeitsbeispiel dafür.

Dadurch wird die Mittelposition behandelt, wenn Sie die Größe der Webseite ändern oder in einer anderen Größe laden.

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

Im obigen Beispiel istloading divimmer in der Mitte.

Ich hoffe, das hilft dir :)

1
Vikash Pandey

In Ihrer Skript-Seite ...

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

Verwenden Sie eine Mittelklasse in der Div ...

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