{"id":64,"date":"2010-01-19T10:45:10","date_gmt":"2010-01-19T09:45:10","guid":{"rendered":"http:\/\/www.froos.de\/blog\/?p=64"},"modified":"2010-01-19T11:01:31","modified_gmt":"2010-01-19T10:01:31","slug":"css-div-horizontal-und-vertikal-zentrieren","status":"publish","type":"post","link":"https:\/\/www.froos.de\/blog\/css-div-horizontal-und-vertikal-zentrieren\/","title":{"rendered":"CSS: div horizontal und vertikal zentrieren"},"content":{"rendered":"

Ein div horizintal zu zentrieren ist nicht weiter schwer, das wird durch folgendes div erreicht:
\n
\n<div style=\" width: 100px; margin-left: auto; margin-right: auto;\">Test<\/div>
\n<\/code><\/p>\n

Nur dieses div auch noch vertikal zu zentrieren ist nicht mehr so ganz leicht. Auf der Suche danach habe ich die verschiedensten L\u00f6sungen gefunden, darunter auch verschiedene Varianten mit JavaScript. Ich m\u00f6chte jedoch die Ausrichtung per CSS vornehmen. Hier finden sich in der Regel zwei L\u00f6sungen, die eine ist etwas leichter, hat jedoch den Nachteil, dass bei einem verkleinerten Browserfenster der Inhalt der Seite verschwindet, da mit negativen margin<\/a>-Angaben gearbeitet wird.<\/p>\n

Die zweite L\u00f6sung stammt von wpdfd und findet sich unter “Dead Center<\/a>“. Die Idee stammt somit nicht von mir, ich m\u00f6chte sie jedoch anhand eines Beispiels kurz vorstellen.<\/p>\n

Dazu habe ich den Quellcode von wpdfd f\u00fcr meine Bed\u00fcrfnisse angepasst, als einfaches Beispiel soll auf einer sonst leeren Seite ein Link in der Mitte erscheinen.<\/p>\n

CSS-Quellcode:
\n
\n#horizon
\n{
\nbackground-color: transparent;
\ntext-align: center;
\nposition: absolute;
\ntop: 50%;
\nleft: 0px;
\nwidth: 100%;
\nheight: 1px;
\noverflow: visible;
\nvisibility: visible;
\ndisplay: block
\n}<\/p>\n

#content
\n{
\nbackground-color: transparent;
\nmargin-left: -125px;
\nposition: absolute;
\ntop: -35px;
\nleft: 50%;
\nwidth: 250px;
\nheight: 70px;
\nvisibility: visible
\n}
\n<\/code><\/p>\n

An der entsprechenden Stelle wird zuerst das div “horizon” ge\u00f6ffnet, darin wiederum das div “content” mit dem zu zentrierenden Inhalt.
\n
\n<div id=\"horizon\">
\n<div id=\"content\">
\nFabian
\n<\/div>
\n<\/div>
\n<\/code><\/p>\n

Warum und wie das Ausrichten funktioniert, dazu findet sich eine kurze Erkl\u00e4rung bei der angegebenen Quelle.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ein div horizintal zu zentrieren ist nicht weiter schwer, das wird durch folgendes div erreicht: <div style=” width: 100px; margin-left: auto; margin-right: auto;”>Test<\/div> Nur dieses div auch noch vertikal zu zentrieren ist nicht mehr so ganz leicht. Auf der Suche danach habe ich die verschiedensten L\u00f6sungen gefunden, darunter auch verschiedene Varianten mit JavaScript. Ich m\u00f6chte […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/posts\/64"}],"collection":[{"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":8,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/posts\/64\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.froos.de\/blog\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}