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

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>

quelle

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

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

LukASh
quelle

Fügen Sie eine Erklärung hinzu

Pankaj Makwana

-4

Dazu müssten Sie die Bildschirmgröße ermitteln. Dies ist mit CSS oder HTML nicht möglich. Sie benötigen JavaScript. Hier ist der Eintrag im Mozilla Developer Center zu den Fenstereigenschaften https://developer.mozilla.org/en/DOM/window#Properties

Ermitteln Sie die verfügbare Höhe und Position entsprechend.

Scott Radcliff
quelle

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

Antworten:

Verwenden von Positionen:

Flex verwenden: