it-swarm.com.de

So richten Sie ein <div> auf die Mitte (horizontal/Breite) der Seite aus

Ich habe ein div-Tag mit width auf 800px . Wenn die Browserbreite größer als 800px ist, sollte die Variable div nicht gedehnt werden. Sie sollte jedoch die Mitte der Seite anzeigen.

751
Shimmy
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
1008
AgileJon

position: absolute und dann top:50% und left:50% platziert den oberen Rand in der vertikalen Mitte des Bildschirms und den linken Rand in der horizontalen Mitte. Anschließend fügen Sie margin-top zum Negativ der Höhe des hinzu div dh -100 verschiebt es um 100, ähnlich für margin-left. Dies wird genau in der Mitte der Seite geteilt. 

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>  

296
Summo

Moderne Flexbox -Lösung ist der Weg in/ab 2015. justify-content: center wird für das übergeordnete Element verwendet, um den Inhalt an dessen Mitte auszurichten.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Ausgabe

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

67
Manoj Kumar
  1. Meinen Sie damit, dass Sie es vertikal oder horizontal zentrieren möchten? Sie sagten, Sie hätten height auf 800px festgelegt und wollten, dass das div nicht gestreckt wird, wenn width größer ist als das ...

  2. Um horizontal zu zentrieren, können Sie das margin: auto;-Attribut in css verwenden. Außerdem müssen Sie sicherstellen, dass die Elemente body und html keinen Rand oder Abstand haben:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
56
Tomas Aschan

Damit es auch in Internet Explorer 6 richtig funktioniert, müssen Sie Folgendes tun:

HTML

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

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
38
Kevin Dungs
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
33
Mohammad

Sie können es auch so verwenden:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
27
RajeshKdev

Verwenden Sie einfach das mittlere Tag direkt nach dem Body-Tag und beenden Sie das mittlere Tag kurz vor dem Ende des Körpers

<body>
<center>
........your code here.....
</center>
</body>

Dies funktionierte für mich mit allen Browsern, die ich ausprobiert habe

14
Bharat Chhatre

Dies kann leicht über einen Flexbehälter erreicht werden.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Vorschau-Link

13
Roy

Fügen Sie diese Klasse zu dem Div hinzu, das zentriert werden soll (das eine festgelegte Breite haben sollte):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

Oder fügen Sie Ihrer Div-Klasse das Margin-Material hinzu:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}
12
Taylor Brown

Verwenden Sie die Eigenschaft css flex : http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}
10
user1125394

Einige andere bereits vorhandene Setups aus älterem Code, die die Seitenzentrierung von Seitenumbrüchen verhindern, sind: 1) andere Klassen, die in externen Stylesheet-Links verborgen sind . 2) andere Klassen, die in etwas wie ein img eingebettet sind (wie für ältere externe CSS) Druckformat-Steuerelemente) 3) Legendencode mit IDs und/oder KLASSEN steht in Konflikt mit einer benannten Div-Klasse.

6
Dennis Struck

Zentrieren ohne Angabe der Breite der Breite:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

Dies ist so etwas wie <center> tag, außer:

  • alle direkten Inline-Childs-Elemente (zB <h1>) von <center> werden ebenfalls in der Mitte positioniert
  • inline-Block-Elemente können je nach Browsereinstellung eine andere Größe haben (mit der Einstellung display:block verbunden)
5
user669677

Verwenden Sie justify-content und align-items, um eine div horizontal und vertikal auszurichten.

https://developer.mozilla.org/de/docs/Web/CSS/justify-contenthttps://developer.mozilla.org/de/docs/Web/CSS/align- Artikel

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

4
JFathi
body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

http://jsfiddle.net/NPV2E/

"width: 100%" für "body" -Tag ist nur ein Beispiel. In echten Projekten können Sie diese Eigenschaft entfernen.

4

Wenn Sie regelmäßig Inhalte und nicht nur eine Textzeile haben, ist der einzige mögliche Grund, den ich kenne, die Berechnung der Marge.
Hier ist ein Beispiel: 

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

#supercontainer ist also Ihr "whole page" und width ist 1200px.
#middlecontainer ist div mit dem Inhalt Ihrer Site; es ist width102px. Falls die width des Inhalts bekannt ist, müssen Sie die Seitengröße auf 2 unterteilen und die Ergebnishälfte der width des Inhalts halbieren:
1200/2 (102/2) = 549; 

Ja, ich sehe auch, dass dies DER GROSSE-Fehler von CSS ist.

4
rodnower

Dies funktioniert auch in IE.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}
3
Glen

Einfach http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}
3
user3439263

Div vertikal und horizontal innerhalb des übergeordneten Elements zentriert, ohne die Inhaltsgröße festzulegen

Check out dieses Beispiel (Klick) . Sehr einfach und funktioniert auch für flexible Höhen.

Und hier (klick) ist eine schöne Übersicht mit einigen anderen Lösungen.

Und hier (klick) ein weiteres Beispiel mit einer flexiblen Breitenlösung mit dem berühmten Trick -50%

3
Wilt

Verwenden Sie den folgenden Code, um das Div-Feld zu zentrieren:

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}
<div class="box-content">
</div>

3
Santosh Khalse

In meinem Fall ist die Bildschirmgröße des Telefons nicht bekannt. Ich habe Folgendes getan.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JS(bevor Sie diesen DIV anzeigen müssen)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show(); 
1
Edye Chan

Wenn sich Ihr Center-Inhalt tief in anderen Divs befindet, können Sie nur durch den Rand gerettet werden. Nichts anderes. Ich stehe dem immer gegenüber, wenn ich kein Framework wie Bootstrap verwende.

1
.middle {
   margin: auto;
   text-align: center;
}
1
KBH
<parent>
 <child>
 </child>
</parent>

elternteil { Position: relativ } Kind { Position: absolut, links: 50%, transform: translateX (-50%) }

1
Levon
<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

Wenn Sie die vertikale Position ändern möchten, ändern Sie den Wert von 250 und Sie können den Inhalt nach Ihren Wünschen gestalten. Es ist nicht erforderlich, die Breite und andere Parameter anzugeben.

holen Sie sich die Breite des Bildschirms als Rand links 25% Machen Sie rechts 25% Auf diese Weise wird der Inhalt Ihres Containers in der Mitte angezeigt 800px; <

div class='container' width='device-width' id='updatedContent'> 
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}
0
mark dibe

Eine ziemlich alte Frage mit vielen Antworten, aber aus irgendeinem Grund funktionierte keiner von ihnen wirklich für mich. Das hat bei mir funktioniert und es funktioniert auch über Browser hinweg:

.center {
    text-align: center;
    height: 100%;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
}