Positionieren Sie das <div> -Element in der Mitte des Bildschirms

134

Ich möchte ein <div>(oder ein <table>) Element unabhängig von der Bildschirmgröße in der Mitte des Bildschirms positionieren . Mit anderen Worten, der Abstand zwischen "oben" und "unten" sollte gleich sein, und der Abstand zwischen "rechts" und "links" sollte gleich sein. Ich möchte dies nur mit CSS erreichen.

Ich habe Folgendes versucht, aber es funktioniert nicht:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Hinweis:
Es ist in Ordnung, ob das <div>Element (oder <table>) mit der Website scrollt oder nicht. Ich möchte nur, dass es zentriert wird, wenn die Seite geladen wird.

javascript css html

— sumit
quelle

1

Mögliches Duplikat von Wie man ein <div> an der Mitte der Seite

— ausrichtet

Hallo Purmou, die Frage, die du erwähnt hast, ob für die Positionierung in der Mitte der Seite, dh links und rechts gleich viel Platz - nicht der obere und untere Platz gleich!

— Summe

1

Mögliches Duplikat von Was ist der beste Weg, um eine Div vertikal mit CSS zu

— zentrieren

mögliches Duplikat von Wie zentriere ich ein Div in einem Div - horizontal?

— bjb568

201

Der einfache Weg, wenn Sie eine feste Breite und Höhe haben:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Bitte verwenden Sie keine Inline-Stile! Hier ist ein Arbeitsbeispiel http://jsfiddle.net/S5bKq/ .

— einstein
quelle

13

Für diejenigen, die eine dynamische Höhe suchen: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 warum nicht Inline-Stile verwenden? aus den bekannten Gründen oder gibt es noch etwas, das ich für das spezifische Beispiel wissen sollte?

— Sharky

@KatrinRaimond ist es aus den bekannten Gründen, dokumentiert hier stackoverflow.com/questions/2612483/… und hier webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Wenn Sie jedoch die Spitze des DivElements in der Einheit '%' festlegen, nimmt das DivElement vertikalen Platz ein, es sei denn, das DivElement befindet sich in einem relativen Element.

— Sudip

ist Position: fest oder Position: absolut?

— Kurkula

151

Da Transformationen heutzutage allgegenwärtiger unterstützt werden, können Sie dies tun, ohne die Breite / Höhe des Popups zu kennen

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Einfach! JSFiddle hier: http://jsfiddle.net/LgSZV/

Update: Check out https://css-tricks.com/centering-css-complete-guide/ für eine ziemlich umfassende Anleitung auf CSS Zentrierung. Fügen Sie es dieser Antwort hinzu, da es viele Augäpfel zu bekommen scheint.

— XwipeoutX
quelle

1

Wenn der Inhalt im Popup verwendet wird, overflow:autoist das Scrollen in IE9 fehlerhaft. :(

— joescii

2

Nicht so allgegenwärtig. IE8 macht immer noch 20% der Browserfreigabe aus und unterstützt sie nicht . Nehmen Sie diese also nur für IE9 +.

— Fotanus

7

+1 als einzige Lösung, bei der Sie weder Höhe noch Breite angeben oder Javascript verwenden müssen.

— Jan Derk

@fotanus, wenn Entwickler IE 9 nicht mehr unterstützen <Benutzer migrieren oder aktualisieren ihren Browser.

— Diego Vieira

@DIegoVieira so funktioniert das leider nicht. Sehen Sie die Tragödie der Commons . Die Leute werden IE8 weiterhin unterstützen, weil sie diesen Anteil nicht verlieren möchten, und die Leute werden ihn weiterhin verwenden, weil er funktioniert.

— Fotanus

33

Stellen Sie die Breite und Höhe ein und Sie sind gut.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Wenn Sie möchten, dass die Elementdimensionen flexibel sind (und sich nicht um ältere Browser kümmern), lesen Sie die Antwort von XwipeoutX .

— Erik Aigner
quelle

1

Dies ist die sauberste und einfachste Antwort und ist mobil freundlich zu. +1

— Rust

22

Es funktioniert für jedes Objekt. Auch wenn Sie die Größe nicht kennen:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— Leuchtende
quelle

17

Mit HTML 5 und CSS 3 ist das jetzt einfacher:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
quelle

12

Wenn Sie eine feste, divnur absolute Position haben, liegt diese bei 50% von oben und 50% links und am negativen Rand oben und links von der Hälfte der Höhe bzw. Breite. Passen Sie sich Ihren Bedürfnissen an:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
quelle

9

Verwenden Sie Flex . Viel einfacher und funktioniert unabhängig von Ihrer divGröße:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Erweitern Sie das Snippet

— Caner
quelle

3

Ich würde dies in CSS tun:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

dann in HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
quelle

0

Versuche dies

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Oder dieses

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
quelle

0

Wenn jemand nach einer Lösung sucht,

Ich habe das gefunden,

Es ist die beste Lösung, die ich bisher gefunden habe!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Ich hoffe dir gefällt es!

— Christopher Atwood
quelle

0

Ein weiterer einfacher, flexibler Ansatz zum Anzeigen des Blocks in der Mitte: Verwenden der nativen Textausrichtung mit line-heightund text-align.

Lösung:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Und HTML-Beispiel:

<div class="parent">
  <div class="child">My center block</div>
</div>

Wir machen div.parentVollbild und sein einzelnes Kind div.childrichtet sich als Text aus display: inline-block.

Vorteile:

Flexibilität, keine absoluten Werte
Unterstützung Größe ändern
funktioniert gut auf dem Handy

Einfaches Beispiel für JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
quelle

0

Alternative Lösung, bei der keine absolute Position verwendet wird:
Ich sehe viele absolute Antworten auf die Position. Ich konnte Position absolut nicht verwenden, ohne etwas anderes zu brechen. Für diejenigen, die dies nicht konnten, habe ich
Folgendes getan: https://stackoverflow.com/a/58622840/6546317 (als Antwort auf eine andere Frage veröffentlicht).

Die Lösung konzentriert sich nur auf die vertikale Zentrierung, da meine untergeordneten Elemente bereits horizontal zentriert waren. Dies kann jedoch angewendet werden, wenn Sie sie nicht auf andere Weise horizontal zentrieren können.

— reddtoric
quelle

-2

Versuche dies:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
quelle

2

Dies ist

— praktisch

Ja, aber hier erkläre ich die Funktionsweise des Randes oben und links ... jemand weiß das nicht ....

— user3423956

1

Dann ist es

— praktisch