Erstellen Sie ein Div-Zentrum des Ansichtsfensters – Horizontal und vertikal [duplicate]

Lesezeit: 5 Minuten

Ich habe ein <div id="wrapper"> Container, in dem mein gesamter Seiteninhalt vorhanden sein wird. Ich habe versucht, das Div-Zentrum vertikal und horizontal zu machen, indem ich die CSS-Eigenschaft like verwende margin:0 auto; on #wrapper.

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
}

Durch die Verwendung von obigem CSS kann ich das Div in (oben Mitte) des Bildschirms machen, aber wie man es zentriert (vertikal) macht. Wenn ich in Firefox herauszoome, wird mein Div in der oberen Mitte herauszoomen, aber was ich möchte, sollte immer in der Mitte des Bildschirms sowohl vertikal als auch horizontal vorhanden sein.

Kann mir jemand vorschlagen, wie ich das Layout so bekommen kann.

Danke im Voraus.

  • Sie können sich diesen Link ansehen: stackoverflow.com/questions/659677/…

    – vikas etagi

    13. Februar 2017 um 12:56 Uhr

Benutzer-Avatar
stebb

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Demo: http://jsfiddle.net/fJtNQ/

Warum funktioniert das?

Nun, im Grunde haben Sie ein absolut positioniertes Element innerhalb der Kuppel. Das bedeutet, dass Sie es positionieren können, wo immer Sie möchten, und wenn Sie kein relativ positioniertes Element als übergeordnetes Element haben, sind links und oben der Abstand vom linken/oberen Ursprung des Dokuments.

Zuweisen left:50% und top:50% ermöglicht es, dieses Element immer in der Mitte des Bildschirms zu positionieren, aber in der Mitte finden Sie die obere linke Ecke des Elements.

Wenn Sie eine feste Breite/Höhe haben, können Sie den Punkt in der Mitte leicht „übersetzen“, um tatsächlich die Mitte des Wrapper-Div zu sein, indem Sie negativ angeben margin-left und margin-top (daher werden ihre Werte mit Hilfe einer extrem einfachen Grundmathematik sein -(width/2) und -(height/2))

BEARBEITEN

Sie können auch einfach zentrieren, indem Sie verwenden flexboxplus (ein großer) müssen Sie w/h nicht angeben, dh:

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

Demo: https://jsfiddle.net/00utf52o/

  • In der Vergangenheit habe ich Methoden verwendet, bei denen ich den Wrapper in ein anderes Containerelement eingefügt habe. Äußeres vertikal und inneres horizontal zentrieren. Das ist viel schöner.

    – Dan Hanly

    8. März 2012 um 17:59 Uhr

  • Normalerweise mag ich es nicht, wenn Leute einfach ein JSFiddle und den Code ohne Erklärung posten, nur um am schnellsten zu antworten, aber es ist eine gute Antwort, +1

    – ShadowScripter

    8. März 2012 um 18:01 Uhr


  • Du hast Recht, ich war mit dem Handy, und soweit die Lösung ziemlich einfach war, habe ich sie gerade in 1 Sekunde beantwortet. Werde es schnellstmöglich erklären 🙂

    – stebb

    8. März 2012 um 18:06 Uhr

  • @stecb Denken Sie daran, nur weil er es akzeptiert hat, heißt das nicht, dass Sie nicht erklären sollten, was los ist. Fügen Sie zumindest einen Link zu einem Tutorial hinzu, das die vertikale Ausrichtung durchführt. Es ist gut, Referenzen zu haben. 😉

    – ShadowScripter

    8. März 2012 um 18:11 Uhr

  • Das ist eine Methode, die funktioniert, aber es wird nicht als Best Practice empfohlen, denn wenn Ihr Ansichtsfenster kleiner ist als das Element, das Sie zentrieren, sehen Sie nicht das gesamte Element und Sie können nicht scrollen! Seien Sie also vorsichtig damit! Besser ist es, margin:auto zu verwenden, zB

    – Helmut

    21. September 2012 um 13:18 Uhr

Benutzer-Avatar
musafar006

Die Antwort von @stecb funktioniert gut, wenn Sie mit fester Breite/Höhe arbeiten.

Verwenden Sie Folgendes, um ein Div oder ein Bild in allen Ansichtsfenstern vertikal in der Mitte zu positionieren und es reaktionsfähig zu machen:

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

Ich habe einfach margin-left und margin-top durch transform ersetzt.

Wenn Sie einen Rand um das Element wünschen, verwenden Sie Folgendes:

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JSFiddle |
Quelle

Ich fand das sogar in responsiven Ansichten nützlich.

  • #elem-to-center funktioniert sehr gut für große Ansichtsfenster. Aber es bricht für kleinere Ansichtsfenster. Wie lässt sich diese Lösung auf kleinere Viewports übertragen?

    – Gitau Harrison

    18. Oktober 2020 um 0:30 Uhr

  • @ GitauHarrison Ich habe gerade das JSFiddle überprüft und konnte es nicht reproduzieren. Vielleicht ist Ihr Styling anders. Können Sie bitte kurz erklären, was genau Sie erreichen wollen? Eine Geige hilft.

    – musafar006

    20. Oktober 2020 um 13:55 Uhr


Hier ist eine Lösung für diejenigen, die ein untergeordnetes Div relativ zum Ansichtsfenster und nicht “relativ zum übergeordneten Div” zentrieren müssen. Andere hier erwähnte Lösungen funktionieren in diesem Fall nicht, da sie dazu neigen, das untergeordnete div-Zentrum relativ zum übergeordneten div zu machen.

<div id="container">
  <div id="wrapper">Always center, No matter the parent div's position</div>
</div>

#wrapper {
 width:300px;
 height:300px;
 margin:0 auto;
 background:green;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-150px;
 margin-top:-150px;
}

#container {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  bottom: 0;
  left: 0;
}

Demo hier http://jsbin.com/yeboleli/2/edit?css,Ausgabe

  • Wenn ich deine Demo für mich öffne wrapper Das Element wird nicht vertikal zentriert, sondern nur horizontal.

    – Krisztián Balla

    27. November 2021 um 8:40 Uhr

Ich verwende jQuery

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

Der einfachste und sauberste Weg, dies zu tun, besteht darin, die Höhe, den Rand (und die Breite, wenn Sie möchten) mithilfe der Ansichtsfenstergrößen festzulegen.
Sagen Sie, Sie wollen die height Wenn Ihr Container 60% (60vh) des Bildschirms einnehmen soll, können Sie den Rest (40vh, da Gesamthöhe des Viewports = 100vh) gleichmäßig auf den oberen und unteren Rand aufteilen, sodass sich das Element automatisch in der Mitte ausrichtet.
Einstellung der margin-left und margin-right zu autostellt sicher, dass der Behälter horizontal zentriert ist.

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>

Benutzer-Avatar
Chicago


Erwägen Sie die Verwendung display: table zusammen mit display: table-cell; vertical-align: middle auf einem separaten Element. Da CSS keine semantische Bedeutung hat, ist es eine akzeptable Lösung.

Ich habe ein Beispiel für dich ausgearbeitet: http://dabblet.com/gist/2002681

Der einzige Nachteil ist, dass etwas mehr Markup erforderlich ist als bei einigen anderen Lösungen, aber es zieht sich zusammen und erweitert sich mit dem Inhalt.

1186220cookie-checkErstellen Sie ein Div-Zentrum des Ansichtsfensters – Horizontal und vertikal [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy