{"id":23246,"date":"2015-02-05T23:01:58","date_gmt":"2015-02-05T15:01:58","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23246"},"modified":"2023-12-11T19:22:53","modified_gmt":"2023-12-11T11:22:53","slug":"css-tricks-vertical-align-content","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/","title":{"rendered":"6 Ways to Align Content Vertically with CSS"},"content":{"rendered":"<p>Let\u2019s discuss vertical alignment in CSS, or more accurately, how it\u2019s not straightforward. CSS hasn\u2019t provided an official method to center content vertically within its container. This issue has likely frustrated web developers globally. But fear not, in this post, we\u2019ll share several tricks to help you <strong>simulate this effect<\/strong>.<\/p>\n<p>However, these tricks might have limitations, and you might need to <strong>combine multiple methods<\/strong> to achieve the desired result. If you know any other tricks, please share them in the comments.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/\" class=\"ref-block__link\" title=\"Read More: How to Achieve Equal Column Heights Using CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Achieve Equal Column Heights Using CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-equal-height.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16834 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-equal-height.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Achieve Equal Column Heights Using CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tTraditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Use Absolute Positioning<\/h2>\n<p>The first trick we\u2019ll explore involves the <code>position<\/code> property. Imagine you have two <code>&lt;div&gt;<\/code> elements: one as the container and the other as the child element containing the content.<\/p>\n<p>First, set the container element\u2019s position to relative. Then, set the child element\u2019s position to <code>absolute<\/code>. This allows us to position it freely within the container.<\/p>\n<p>To align it vertically, adjust the child element\u2019s position from the top by half of the container\u2019s height, and then pull it up by half of the child element\u2019s width. Here\u2019s how it looks:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/bmu0gLbj\/2\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>This technique is ideal when there\u2019s only one child element, as the <code>absolute<\/code> position will impact any other elements within the same container.<\/p>\n<h2>2. Use CSS3 Transform<\/h2>\n<p><strong>CSS3 Transform<\/strong> simplifies the process of centering content. Unlike the <code>position<\/code> property, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/\">CSS3 Transform<\/a> does not alter the positioning of other elements within the same container.<\/p>\n<p>Using the same HTML structure as the previous method \u2014 one parent and one child element \u2014 positioning the child element <code>50%<\/code> from the top and applying a CSS transform with a translation of <code>-50%<\/code> achieves the desired centering. Here\u2019s the result:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/jzgvq6cd\/1\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>However, remember that CSS3 Transforms are not supported in Internet Explorer 8 and earlier versions. You may need to use one of the other methods here as a fallback.<\/p>\n<h2>3. Use Padding<\/h2>\n<p>Another method involves using <code>padding<\/code> to create the appearance of vertical alignment. Simply set equal top and bottom padding like this:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/5napbmcc\/1\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>This approach is ideal when the container\u2019s width is not fixed and set to <code>auto<\/code>.<\/p>\n<h2>4. Use Line Height<\/h2>\n<p>For containers with a single line of text, vertical alignment can be achieved using the <code>line-height<\/code> property. Set the <code>line-height<\/code> approximately equal to the container\u2019s height to see this effect:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/foxf65cx\/1\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>It\u2019s important to note that this method is effective only for a single line of text. If the content spans multiple lines, the spacing between lines will be equal to the <code>line-height<\/code> value, resulting in excessive whitespace.<\/p>\n<h2>5. Use CSS Table<\/h2>\n<p>My preferred method for vertical alignment is using CSS Table, especially because it\u2019s compatible with older browsers like Internet Explorer 8. This technique involves setting the container element\u2019s display to <code>table<\/code> and the child element\u2019s display to <code>table-cell<\/code>. Then, apply the <code>vertical-align<\/code> property to center the content vertically.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/6bdgu0ch\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>6. Use Flexbox<\/h2>\n<p>The final method for vertical centering is by using Flexbox, a new module in CSS3. Flexbox simplifies the alignment process. To vertically center content in a flex container, just add <code>align-items: center;<\/code> as shown below:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"280\" src=\"https:\/\/jsfiddle.net\/tfirdaus\/tjn66evy\/embedded\/result,css,html\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>However, be aware that Flexbox is only partially supported in some browsers. Therefore, similar to the CSS3 Transform method, ensure that your layout degrades gracefully in these browsers.<\/p>","protected":false},"excerpt":{"rendered":"<p>Let\u2019s discuss vertical alignment in CSS, or more accurately, how it\u2019s not straightforward. CSS hasn\u2019t provided an official method to center content vertically within its container. This issue has likely frustrated web developers globally. But fear not, in this post, we\u2019ll share several tricks to help you simulate this effect. However, these tricks might have&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>6 Ways to Align Content Vertically with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Let&#039;s discuss vertical alignment in CSS, or more accurately, how it&#039;s not straightforward. CSS hasn&#039;t provided an official method to center content\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Ways to Align Content Vertically with CSS\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s discuss vertical alignment in CSS, or more accurately, how it&#039;s not straightforward. CSS hasn&#039;t provided an official method to center content\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-05T15:01:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-11T11:22:53+00:00\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"6 Ways to Align Content Vertically with CSS\",\"datePublished\":\"2015-02-05T15:01:58+00:00\",\"dateModified\":\"2023-12-11T11:22:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/\"},\"wordCount\":513,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/\",\"name\":\"6 Ways to Align Content Vertically with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-02-05T15:01:58+00:00\",\"dateModified\":\"2023-12-11T11:22:53+00:00\",\"description\":\"Let's discuss vertical alignment in CSS, or more accurately, how it's not straightforward. CSS hasn't provided an official method to center content\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-tricks-vertical-align-content\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Ways to Align Content Vertically with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Ways to Align Content Vertically with CSS - Hongkiat","description":"Let's discuss vertical alignment in CSS, or more accurately, how it's not straightforward. CSS hasn't provided an official method to center content","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:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/","og_locale":"en_US","og_type":"article","og_title":"6 Ways to Align Content Vertically with CSS","og_description":"Let's discuss vertical alignment in CSS, or more accurately, how it's not straightforward. CSS hasn't provided an official method to center content","og_url":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-02-05T15:01:58+00:00","article_modified_time":"2023-12-11T11:22:53+00:00","author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"6 Ways to Align Content Vertically with CSS","datePublished":"2015-02-05T15:01:58+00:00","dateModified":"2023-12-11T11:22:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/"},"wordCount":513,"commentCount":36,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/","url":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/","name":"6 Ways to Align Content Vertically with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2015-02-05T15:01:58+00:00","dateModified":"2023-12-11T11:22:53+00:00","description":"Let's discuss vertical alignment in CSS, or more accurately, how it's not straightforward. CSS hasn't provided an official method to center content","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Ways to Align Content Vertically with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-62W","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23246"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23246\/revisions"}],"predecessor-version":[{"id":70647,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23246\/revisions\/70647"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23246"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}