it-swarm.com.de

Positionieren des <div> -Elements in der Bildschirmmitte

Ich möchte ein <div> (oder ein <table>) Element in der Mitte des Bildschirms positionieren, unabhängig von der Bildschirmgröße. Mit anderen Worten, der Platz auf "oben" und "unten" sollte gleich sein und der Platz auf "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 jedem Fall in Ordnung, wenn das <div>-Element (oder <table>) mit der Website scrollt oder nicht. Sie möchten nur, dass sie beim Laden der Seite zentriert wird. 

114
Sumit Gupta

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 keine Inline-Styles verwenden! Hier ist ein Arbeitsbeispiel http://jsfiddle.net/S5bKq/ .

173
einstein

Da Transformationen heutzutage mehr und mehr unterstützt werden, können Sie dies tun, ohne die Breite/Höhe des Popup-Fensters 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 ausführliche Anleitung zur CSS-Zentrierung. Wenn man es zu dieser Antwort hinzufügt, scheint es viele Augäpfel zu bekommen.

129
XwipeoutX

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 keine älteren Browser interessieren), gehen Sie zur Antwort von XwipeoutX .

27
Erik Aigner

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%);
}
14
luminousmen

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>
14
Daniel De León

Wenn Sie einen festen div haben, ist die absolute Position nur 50% von oben und 50% links und der negative Rand oben und links von halber Höhe und 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;
}
12
elclanrs

Verwenden Sie flex . Viel einfacher und funktioniert unabhängig von Ihrer div-Größ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>

5
Caner

Ich würde das in CSS machen:

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

dann in HTML:

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

Ein weiterer einfacher, flexibler Ansatz für die Anzeige von Blöcken in der Mitte: Verwenden der Textausrichtung mit line-height und 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.parent im Vollbildmodus, und sein einziges untergeordnetes div.child richtet sich als Text mit display: inline-block aus.

Vorteile:

  • flexibilität, keine absoluten Werte
  • unterstützung der Größenänderung
  • funktioniert gut auf dem Handy

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

0
comm1x

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!

0

versuche dies:

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