{"id":3934,"date":"2024-08-21T15:04:35","date_gmt":"2024-08-21T13:04:35","guid":{"rendered":"https:\/\/vielhuber.de\/?p=3934"},"modified":"2024-08-21T15:15:25","modified_gmt":"2024-08-21T13:15:25","slug":"vertikales-zentrieren-in-css","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/","title":{"rendered":"Vertikales Zentrieren in CSS"},"content":{"rendered":"\n<p>CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive Weise beeinflussen kann. Die vertikale Positionierung von Elementen in der Webentwicklung ist tricky und hat in der Vergangenheit oft Kopfzerbrechen bereitet. Doch diese Zeiten sind gl\u00fccklicherweise vorbei.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Man glaubt es kaum: Im Jahr 2024 ist es nun m\u00f6glich, mit einer Zeile CSS das gew\u00fcnschte Resultat zu erzielen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"0_part.html\">0f1273b25d9806459716<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"1.css\">0f1273b25d9806459716<\/p>\n\n\n\n<p>Fr\u00fcher hat man sich mit einer Vielzahl an anderen M\u00f6glichkeiten beholfen, um dasselbe Ergebnis zu erzielen:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flexbox<\/h2>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"2.css\">0f1273b25d9806459716<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Absolute Positionierung<\/h2>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"3.css\">0f1273b25d9806459716<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inline-Block<\/h2>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"4.css\">0f1273b25d9806459716<\/p>\n\n\n\n<p>Der <a href=\"https:\/\/caniuse.com\/?search=align-content\" target=\"_blank\" rel=\"noreferrer noopener\">Browser-Support f\u00fcr align-content<\/a> ist inzwischen sehr gut und es gibt kein gutes Argument mehr, veraltete Techniken zu verwenden. Man ben\u00f6tigt f\u00fcr diese Aufgabe u.a. kein Flexbox mehr und das Child-Element muss (anders als im obigen Beispiel) auch nicht in einem separaten <code>div<\/code> eingeschlossen werden. Es ist erstaunlich, dass CSS nach Jahrzehnten des Fortschritts erst jetzt \u00fcber eine einzige Eigenschaft zur Steuerung der vertikalen Zentrierung verf\u00fcgt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive Weise beeinflussen kann. Die vertikale Positionierung von Elementen in der Webentwicklung ist tricky und hat in der Vergangenheit oft Kopfzerbrechen bereitet. Doch diese Zeiten sind gl\u00fccklicherweise vorbei.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3934","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Vertikales Zentrieren in CSS &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuiti...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vertikales Zentrieren in CSS &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-21T13:04:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-21T13:15:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Vertikales Zentrieren in CSS\",\"datePublished\":\"2024-08-21T13:04:35+00:00\",\"dateModified\":\"2024-08-21T13:15:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/\"},\"wordCount\":185,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/\",\"name\":\"Vertikales Zentrieren in CSS &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2024-08-21T13:04:35+00:00\",\"dateModified\":\"2024-08-21T13:15:25+00:00\",\"description\":\"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/vertikales-zentrieren-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vertikales Zentrieren in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Vertikales Zentrieren in CSS &#060; Vielhuber David","description":"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuiti...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/","og_locale":"de_DE","og_type":"article","og_title":"Vertikales Zentrieren in CSS &#060; Vielhuber David","og_description":"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive","og_url":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/","og_site_name":"Vielhuber David","article_published_time":"2024-08-21T13:04:35+00:00","article_modified_time":"2024-08-21T13:15:25+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Vertikales Zentrieren in CSS","datePublished":"2024-08-21T13:04:35+00:00","dateModified":"2024-08-21T13:15:25+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/"},"wordCount":185,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/","url":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/","name":"Vertikales Zentrieren in CSS &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2024-08-21T13:04:35+00:00","dateModified":"2024-08-21T13:15:25+00:00","description":"CSS ist f\u00fcr die meisten von uns immer noch verwirrend: Es hat hunderte schlecht benannte Eigenschaften, von denen jede das Ergebnis auf nicht intuitive","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/vertikales-zentrieren-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Vertikales Zentrieren in CSS"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/posts\/3934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/comments?post=3934"}],"version-history":[{"count":7,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/posts\/3934\/revisions"}],"predecessor-version":[{"id":3947,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/posts\/3934\/revisions\/3947"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/media?parent=3934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/categories?post=3934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/pl\/wp-json\/wp\/v2\/tags?post=3934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}