wake-up-neo.com

Versucht, Div horizontal und vertikal im Bildschirm zu zentrieren

Ich versuche, ein Div für meine Zielseite meines Website-Centers in der Mitte des Bildschirms zu erstellen, aber es funktioniert nicht. 

Hier ist mein Code

CSS:

.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}

HTML:

<div id="centerDiv" class="centerDiv">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>

Vielen Dank.

htmlcsscenter
23
user1141887

Hinweis: Wenn Sie versuchen, ein Div horizontal und vertikal zu zentrieren, würde ich vorschlagen, in flexbox zu suchen. Sie müssen weiterhin Fallback-Support bereitstellen, aber Flexbox ist die Zukunft und es ist erstaunlich.

Update: Flexbox wird von allen modernen Browsern now unterstützt.

Sie müssen dem div zuerst eine statische Breite und Höhe geben.

Zweitens müssen Sie position: absolute; und left: 50%; top: 50%; einstellen, dann müssen Sie einen margin-left und margin-top machen, die HALF von Höhe und Breite sind. Es wird dann korrekt angezeigt.

CSS:

.centerDiv{
  width: 800px;
  border-radius: 5px;
  background: #ccc;
  padding: 10px;
  height: 50px;
  position: absolute;
  margin-top: -25px;
  margin-left: -400px;
  top: 50%;
  left: 50%;
}

http://jsfiddle.net/wJ7dY/

P.S. Ich habe dein Styling ein wenig geändert, damit du den Text tatsächlich lesen kannst. Hoffe das hilft!

29
Jassi

Dieser Code ( demo ) ermöglicht das Festlegen von width und height, ohne dass andere Eigenschaften aktualisiert werden müssen (z. B. top = height / 2) oder auf nicht gut unterstützte Techniken angewiesen ist (z. B. display:table;) Es fehlt die Unterstützung für ältere IE - Versionen. Die Kombination mit einer anderen Lösung nur für IE ist wahrscheinlich die beste Wahl.

Das CSS:

.absoluteCenter {
 /* Must manually set width/height */
 width:800px;
 height:500px;

 /* The magic centering code */
 margin:auto;
 position:absolute;
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */

 /* Prevent div from overflowing main window */
 max-width:100%;
 max-height:100%;
 overflow:auto;
}

/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
 /* Place code here to override all above values, and add IE friendly centering */
}

Und das HTML:

<div class="absoluteCenter">
 Content of DIV
</div>
15
0b10011

Was Sie suchen, ist display:table und display:table-cell. Diese Option sollte das #center-Element im #parent-Element unabhängig von der Höhe des #center-Elements vertikal ausrichten. Ich glaube jedoch, dass Sie eine Höhe für das #parent -Element benötigen.

HTML

<div id="parent">
<div id="center">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>
</div>

CSS

#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}

#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}

Ich habe dies gestern erst verwendet, und display:table für die body verwendet. Diese Technik sollte bis IE8 kompatibel sein.

5
Vian Esterhuizen

Versuche Folgendes:

 .centerDiv{
     position: absolute;
     top: 50%;
     height: 400px;
     margin-top: -200px; /* Half of the height */
     left: 50%;
     width:800px;
     margin-left: -400px; /* Half of the width */
     border-radius: 5px;
     background:#111;
     padding:10px;
 }
1
MarkSmits

setzen Sie den Rand auf "auto" und nicht auf "0". Ich denke 100% für Ihren Zweck.

0
Sven Bieder