Div-Box horizontal und vertial zentriert darstellen

[dn3d_fanboy]

Hallo,
ich versuche gerade, eine Div-Box (in diesem Fall den wrapper der kompletten Seite) horizontal und vertikal zentriert darzustellen.
Meine Googlesuche beförtderte das hier (http://www.ohne-css.gehts-gar.net/0002.php) zutage.
Ist dieses Verfahren noch aktuell oder gibt es da eine bessere Lösung?

Mein erster Gedanke war ja, margin: auto für alle Abstände anzuwenden, was leider nicht funktionierte.

Aber vielleicht kann mir auch hier jemand meine Frage oben beantworten.

Besten Dank im Voraus.

 

[ben3plus]

Schau mal hier:
http://d-graff.de/fricca/center.html

Edit: Im Quelltext der html-Datei steht alles drin.

 

[Pixelaner]

Moin,

<div></div>

* {
    margin: 0;
    padding: 0;
}
div {
    width: 100px;
    height: 100px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
   
}

 

[Jormungand]

Absolute Container können mit der genannten Methode mit der linken oberen Ecke zentriert werden. Damit er ganz in der Mitte ist, muss du ihn um die Hälfte seiner Breite nach links und die Hälfte seiner Höhe nach oben verschieben.
Bei relativen Containern kannst du margin-left und margin-right auf auto setzen. Die vertikale Zentrierung geht meiner Ansicht nach nur über die Fricca-Methode (siehe ben3plus).

 

[DaKKK]

Dafür gibt es auch schon ein Tutorial, welches das Thema sehr gut erklärt
http://www.psd-tutorials.de/tutorials/web/html-css/-/view/19704--webseiten-zentrieren-mit-css

 

[ben3plus]

Hallo dn3d_fanboy,

es muss ja nicht gleich ein Danke sein, für die Antworten auf Deine Frage.
Aber: Hat es Dir geholfen?

@ Pixelaner:
Dein Vorschlag ist das wohl gängigste Suchergebnis im WWW.
Hast Du es selber schon einmal ausprobiert? Mach´s mal.
Und dann greife mit dem Cursor das Fenster am rechten unteren
Eck und verkleinere es.
(Um es deutlicher zu machen, erhöhe doch die div-Dimensionen von
100px auf 1000px; erkennbarer mit: background-color: #F00;
Deine div lässt sich wunderbar aus dem Viewport schieben.
Das sollte wohl weniger Sinn der Sache sein, oder?

@ DaKKK
Dein Link ist sicherlich auch hilfreich. Allerdings basiert dieses Tutorial
auf HTML5. Und JavaScript um ältere Browser zu bedienen.
Auch wenn HTML5 und CSS3 aus unserer (die Ersteller) Sicht längst
Standard sind, muss ich immer wieder feststellen, dass viele Auftraggeber
immernoch xHTML-Dateien wünschen, die ohne JavaScript so wenig wie
möglich auf Performance aber nie auf Inhalt verzichten.

Nun sei es mal dn3d_fanboy überlassen, was ihm hilft.
Vielleicht meldet er sich ja nochmal.

 

[emet]

Machen wirs mal perfekt - egal wie hoch und breit.

Richtig verschachteln. Mannchmal ist ein Container mehr auch besser.

<div id="wrapper_out">
<div id="wrapper_in">
    <div id="content">

    <p>Quisque diam arcu, cursus eu scelerisque ac, ...</p>

    <p>Sed lobortis ultrices mauris, quis iaculis ...</p>

    </div>
</div>
</div>

Und da man mit Tabellen sowas schon immer machen konnte (aber man natürlich nicht mit Tabellen arbeiten möchte) und man Container auch wie Tabellen behandeln kann.

* {margin: 0px; padding: 0px;}

html, body {width: 100%; height: 100%; font-family: Arial; font-size: 100.01%; text-align: center; color: #000; }

div, p,  {margin: 0px;}

#wrapper_out {
    display: table;
    height: 100%;
    margin: 0px auto;
    text-align: center;
}

#wrapper_in {
    display: table-cell;
    vertical-align: middle;
}

#content {
    width: 500px;
    padding: 10px;
    background: #eee;
    text-align: left;
}


#content p {
    margin: 0px 0px 15px 0px;
}

So bekommt man horizontal und vertikal die optimale Zentrierung. probiert es mal.

Unter Umständen kann es je nach ..... vorkommen das man dem content noch ein margin: opx auto geben sollte.

Also viel Spaß

 

[ben3plus]

... ist jetzt wohl auch zu spät.
Der TE hat sich ja nicht mehr gemmeldet.

 

[cebito]

Allerdings basiert dieses Tutorial
auf HTML5. Und JavaScript um ältere Browser zu bedienen.

Nein, es basiert nicht darauf, es werden nur HTML5-Elemente benutzt. Es lässt sich auch mit normalen div umsetzen. Und das JS wird auch nur für ältere Browser benötigt, wenn man HTML5 einsetzt.
Die von mir im Tutorial beschriebene Methode ist absolut abwärtskompatibel, selbst der vielgescholtene und (gottseidank) inzwischen von MS nicht mehr unterstützte IE6 kommt damit ohne Probleme klar.

Machen wirs mal perfekt - egal wie hoch und breit. Richtig verschachteln. Mannchmal ist ein Container mehr auch besser.

Das kann o.g. Tutorial auch, ohne zusätzlichen Container.

 

[emet]

Ob er sich gemeldet hat oder nicht - es hilft evtl anderen weiter.

Ich hatte mir das Tutorial nicht extra runter geladen. Das habe ich aber jetzt mal getan.

Natürlich benötigt das Tutorial zusätzliche Container. Oder für was steht .wrap (.wrap:before) und .centered. Das sind die zusätzlichen Container und Anweisungen für die Zentrierung.

Ich habe z.B. auf html5 deshalb verzichtet, weil es eben noch kein Standard ist.

Ebenfalls verzichte ich auf z.B. :before Anweisungen, weil diese andere Tücken haben können und ich benötige kein margin-right: mit Minuswerten. Das kann Anfänger durcheinander bringen.

Mein Beispiel funktioniert z.B. auch ohne width: Werte, sie sind nur zur Begrenzung gedacht. Das nur zur weiteren Erklärung.

Es ist die einfachste und sicherste Zentrierung, die auch ein Anfänger nachvollziehenn kann. Und nur nebenbei würden alte IEs je nach Umfeld ohne diese Anweisungen nicht unbedingt mitspielen.

Ich kenne genügend Unternehmen, die auf Grund firmeninterner Software noch auf relativ altem Stand sind und deren Mitarbeiter steht nur ein alter IE zur Verfügung. Diese letzten stellen jetzt erst wohl langsam um.

Also immer das einfachste und sicherste zuerst. Damit bin ich bis heute am besten gefahren. Erst wenn es notwendig ist, dann kommen andere Techniken zum Einsatz.

Ich wollte mit meiner Erklärung dazu keinem auf den Schlips treten, sondern nur die einfachste und sicherste Methode dazu erklären.

Also bis dann

 

[ben3plus]

Nein, es basiert nicht darauf, es werden nur HTML5-Elemente benutzt.Es lässt sich auch mit normalen div umsetzen.

Ja, ok. Dann muss der TE aber "Hand anlegen". Oder auch nicht. Man weiß ja nicht, wozu und ob er es noch braucht.

Und das JS wird auch nur für ältere Browser benötigt, wenn man HTML5 einsetzt.

Mein Reden. Nichts anderes habe ich angemerkt.
Es wäre aber auch ohne JS eine Abwärtskompatibilität möglich.

Anmerkung zu emet:
Ich sehe das genauso. Ich hatte auch erst kürzlich mit einem Unternehmen (gar nicht mal so klein) zu tun, das weiterhin xp-basiert arbeitet. Und dort musste ich noch IE6 vorfinden. In Deutschland. Obwohl MS vor 2 Jahren stolz ausrief, dass die weltweite Verbreitung unter 1% gesunken ist.
HTML5 dauert zwar schon einige Jahre, aber die wohl auch weiterhin noch.

 

[emet]

In der Frankfurter Bürostadt Niederad hat mir ein Bekannter erzählt, dass dort noch teilweise win2000 läuft. Da geht eh nix anderes. Und die IT Betreuer lassen die Leute keine anderen Browser installieren - nur einige Ausnahmen gibt es.