So positionieren Sie ein Div in der Mitte des Bildschirms, wenn die Seite größer als der Bildschirm ist

141

Hallo, ich verwende etwas Ähnliches wie das Folgende, 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 das Element in der Mitte der Seite und nicht auf dem Bildschirm positioniert wird. Wenn die Seite also ein paar Bildschirme hoch ist und ich mich oben auf der Seite befinde (der obere Teil des Teils wird auf dem Bildschirm angezeigt), wenn ich das Div erscheinen lasse, ist es nicht einmal auf dem Bildschirm. Sie müssen nach unten scrollen, um es anzuzeigen.

Kann mir bitte jemand sagen, wie Sie es in der Mitte des Bildschirms anzeigen lassen möchten?

css  html  window  center 
— Codierer 2
quelle
Ich habe gerade genau diesen Code auf einer Testseite getestet und er hat das Div perfekt auf der Seite zentriert, sogar mit ungefähr 100 <br />davor, um zu versuchen, es nach unten zu drücken. Versuchen Sie möglicherweise, den Rest Ihres Codes zu überprüfen, um festzustellen, ob Sie etwas haben, das entweder die Werte des DIV überschreibt oder das Ihren DIV dazu veranlasst, diese Probleme zu verursachen.
— Eli

Antworten:

268

Fügen position:fixedSie einfach hinzu und es bleibt im Blick, auch wenn Sie nach unten scrollen. siehe es 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;
}
— Hussein
quelle
1
Sie sind Lebensretter. Einfache Lösung funktioniert gut, auch wenn das Element Transformationsskala angewendet hat.
— Vinnie
91

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>
Erweitern Sie das Snippet

— user2684935
quelle
7
Dieser Ansatz ist weitaus besser als die genehmigte Antwort
— Viacheslav Dobromyslov
2
liebte dieses, aber funktioniert das in "älteren" Browser?
— BernaMariano
14

Verwenden Sie 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");
— Erdogan
quelle
5

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

Probier diese.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— Chandan Sharma
quelle
1
Ich denke, dieser ist nützlicher, weil Sie keinen Stil auf das übergeordnete Element anwenden müssen.
— canbax
3 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Das hat bei mir funktioniert

— Abraham
quelle
2
Obwohl dies technisch korrekt sein mag, möchten Sie eine kurze Beschreibung
— hinzufügen,
2

Kurze Antwort: Fügen Sie einfach hinzu position:fixedund das wird Ihr Problem lösen

— Parth
quelle
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
quelle
Die Frage wurde mir im Interview gestellt "Wie richten Sie die Div-Mitte des Bildschirms aus?"
— Maitrey Malve
1

Nun, unten ist das Arbeitsbeispiel dafür.

Dies behandelt die Mittelposition, wenn Sie die Größe der Webseite ändern oder in einer beliebigen 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>
Erweitern Sie das Snippet

Im obigen Beispiel ist das Laden von div immer in der Mitte.

Ich hoffe das hilft dir :)

— Vikash Pandey
quelle
1

Zwei Möglichkeiten, ein Tag in der Mitte des Bildschirms oder das übergeordnete Tag zu positionieren:

Verwenden von Positionen:

Setzen Sie das übergeordnete Tag positionauf relative(wenn das Ziel-Tag ein übergeordnetes Tag hat) und legen Sie dann den Ziel-Tag-Stil wie folgt fest:

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

Flex verwenden:

Der übergeordnete Tag-Stil sollte folgendermaßen aussehen:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
— Alex Jolig
quelle
0

In deiner Skriptseite ...

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

Verwenden Sie eine Mittelklasse in der Div ...

   <div class="a-middle">
— Antony Jack
quelle
-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>
Erweitern Sie das Snippet

— Lăng Minh
quelle
-1

FLEX VERWENDEN 

display: flex;
height: 100%;
align-items: center;
justify-content: center;
— ASIR THERANS RAJA M.
quelle
Dadurch wird der Inhalt auf das übergeordnete Element oder die übergeordnete Seite zentriert, nicht auf den Bildschirm.
— Sean
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.