{"id":5720,"date":"2024-12-03T09:17:15","date_gmt":"2024-12-03T09:17:15","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=5720"},"modified":"2024-12-03T09:36:35","modified_gmt":"2024-12-03T09:36:35","slug":"how-to-horizontally-center-div-in-css","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/","title":{"rendered":"How to Horizontally Center Div in CSS"},"content":{"rendered":"\n<p>Often web developers need to horizontally and vertically center div on web pages. This is commonly required to make your website look more appealing and aesthetic. In fact, they need to center many different HTML elements, no just div, on their website. But often developers do not know how to center div and other HTML elements on their website. There are several simple ways to do this. In this article, we will learn how to horizontally center div in CSS. You can use these solutions to center other HTML elements also.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#How_to_Horizontally_Center_Div_in_CSS\" >How to Horizontally Center Div in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#1_Using_Flexbox\" >1. Using Flexbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#2_Using_Fixed_With_Div\" >2. Using Fixed With Div<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#3_Using_Variable_Width_Div\" >3. Using Variable Width Div<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#4_Using_text-align_property\" >4. Using text-align property<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#5_Using_left_property\" >5. Using left property<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#6_Vertically_Center_Div\" >6. Vertically Center Div<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#7_Horizontally_and_Vertically_Center_Div\" >7. Horizontally and Vertically Center Div<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#FAQ\" >FAQ<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Horizontally_Center_Div_in_CSS\"><\/span>How to Horizontally Center Div in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us say you have the following divs &#8211; one inner div with id=inner and the other outer div with id=outer. Let us say you want to center the inner div inside the outer div. We will look at how to center the div both horizontally as well as vertically.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"outer\"&gt;<br>  &lt;div id=\"inner\"&gt;hello world&lt;\/div&gt;<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>Let us look at the some of the common ways to easily center div inside another div, using CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_Flexbox\"><\/span>1. Using Flexbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nowadays most web browsers support display:flex property that allows you to set a div or container to be a flexbox element. A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_flexible_box_layout\/Basic_concepts_of_flexbox\" target=\"_blank\" rel=\"noreferrer noopener\">flexbox<\/a> allows you to design elements with flexible layouts where you can position inner elements easily, without manually setting its position in a fixed manner. They self adjust on devices and support responsive web design. For our purpose, we just need to add 2 properties to CSS styling of outer div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#outer {<br>  display: flex;<br>  justify-content: center;<br>}<\/pre>\n\n\n\n<p>In this case, the inner div may or may not have a width property defined. In the above case, the inner div will only occupy as much space as required for the text. In the following example, the inner div occupies 50% width as that of outer div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#outer {<br>  display: flex;<br>  justify-content: center;<br>}<br><br>#inner {<br> width:50%;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_Fixed_With_Div\"><\/span>2. Using Fixed With Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If your inner div has a fixed width, say, 300px, then you can set its margin CSS property to auto, to horizontally center it. Here is an example.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br>  width: 300px;<br>  margin: auto;<br>}<\/pre>\n\n\n\n<p>In this case, the outer div does not need any other formatting. But your inner div must have a fixed non-zero width for this method to work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_Variable_Width_Div\"><\/span>3. Using Variable Width Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If your inner div only takes up a fraction of your outer div, then you can use &#8216;margin:0 auto&#8217; CSS property to horizontally center the inner div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br>  width: 50%;<br>  margin: 0 auto;<br>}<\/pre>\n\n\n\n<p>In the above code, the inner div automatically occupies 50% of width of its outer div. The margin property is what does the centering. In this case, the inner width is flexible and not fixed and auto adjusts according to the outer div.<\/p>\n\n\n\n<p>For older web browsers such as IE8, you may need to tweak the above setting to the following.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br>  display: table;<br>  margin: 0 auto;<br>}<\/pre>\n\n\n\n<p>In this case, the inner div will occupy only the space required by the text and nothing more, since we have not specified the width property. <\/p>\n\n\n\n<p>In all cases, your inner div needs to have a non-zero flexible width for this solution to work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Using_text-align_property\"><\/span>4. Using text-align property<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>text-align is a popular CSS property used by web developers to horizontally center text in a paragraph, div or other elements. If you set this property to center in outer div, then all inner elements are horizontally centered. This can also be used to horizontally center div inside another div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br> width:50%;<br> display:inline-block;<br>}<br><br>#outer {<br>  text-align: center;<br>}<\/pre>\n\n\n\n<p>In the above code, we set text-align:center property on outer div. We also set inner div to display:inline-block with width 50%.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Using_left_property\"><\/span>5. Using left property<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is another old school way of horizontally centering elements. In this approach, we set the position property of inner div to absolute, instead of relative as in all other cases. This means the position of inner div is independent of all other elements on the page, including the outer div. We further use left property to specify how much offset space to leave to the left of the item. Here is an example to set left property to 50% to horizontally center it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br>  position:absolute;<br>  left:50%;<br>}<\/pre>\n\n\n\n<p>The inner div may or may not have any width. If you also want to vertically center the inner div, use top property to specify the top offset of the inner div. Here is an example to set top property to 50% vertically centering it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#inner {<br>   position:absolute;<br>   left:50%;<br>   width:300px;<br>   top:50%;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Vertically_Center_Div\"><\/span>6. Vertically Center Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In most cases, you may also need to vertically center the inner div, in addition to horizontally centering it. You can do this by setting the height, display and align-items properties of outer div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#outer {<br>  height:100%;<br>  display: flex;<br>  align-items: center;<br>}<\/pre>\n\n\n\n<p>In this case, we set the outer div to be flex box. Further, we set its height to be 100%. You need to compulsorily set the height property of outer div, either to fixed or variable value. Otherwise, this solution will not work. Lastly, we set the align-items property to center. Please note, the align-items property works only if you set the display property of outer div to flex.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Horizontally_and_Vertically_Center_Div\"><\/span>7. Horizontally and Vertically Center Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Combining the solutions #1 and #5, we can horizontally and vertically center inner div using the following properties.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#outer {<br>  height:100%;<br>  display:flex;<br>  justify-content:center;<br>  align-items: center;<br>}<\/pre>\n\n\n\n<p>In this case, the justify-content property horizontally aligns inner div whereas the align-items &amp; height property vertically center the div. Please note, the justify-content and align-items properties work only if you set the outer div&#8217;s display property to flex.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt several simple ways to easily center a div inside another div. You can use any of these methods as per your requirement. We have learnt how to horizontally and vertically center div by setting outer div to be a flexbox. We have also learnt other ways of horizontally centering elements using margin, fixed width and variable width properties.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>1. Do these solutions work on all web browsers?<\/strong><\/p>\n\n\n\n<p>Yes. Unless specified otherwise, as in case of IE 8, these solutions work on all web browsers. They use standard CSS properties that are supported by all major web browsers.<\/p>\n\n\n\n<p><strong>2. Do you need to use JavaScript or another CSS Library for this purpose?<\/strong><\/p>\n\n\n\n<p>No. You can horizontally and vertically center HTML elements using plain CSS. You do not need any JavaScript or CSS libraries for this purpose.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-change-html-inputs-placeholder-color-with-css\/\">How to Change HTML Input Placeholder color<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-detect-click-outside-element-in-javascript\/\">How to Detect Click Outside Element in JavaScript<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-know-which-radio-button-is-selected-via-jquery\/\">How to Know Which Radio Button is Selected via jQuery<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.<\/p>\n","protected":false},"author":1,"featured_media":5741,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[340],"tags":[342],"class_list":["post-5720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-horizontally-center"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Horizontally Center Div in CSS - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Horizontally Center Div in CSS - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-03T09:17:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-03T09:36:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"301\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Horizontally Center Div in CSS\",\"datePublished\":\"2024-12-03T09:17:15+00:00\",\"dateModified\":\"2024-12-03T09:36:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\"},\"wordCount\":1029,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1\",\"keywords\":[\"horizontally center\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\",\"url\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\",\"name\":\"How to Horizontally Center Div in CSS - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1\",\"datePublished\":\"2024-12-03T09:17:15+00:00\",\"dateModified\":\"2024-12-03T09:36:35+00:00\",\"author\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1\",\"width\":301,\"height\":200,\"caption\":\"horizontally center div\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ubiq.co\/tech-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Horizontally Center Div in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#website\",\"url\":\"https:\/\/ubiq.co\/tech-blog\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/\"],\"url\":\"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Horizontally Center Div in CSS - Ubiq BI","description":"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.","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:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Horizontally Center Div in CSS - Ubiq BI","og_description":"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2024-12-03T09:17:15+00:00","article_modified_time":"2024-12-03T09:36:35+00:00","og_image":[{"width":301,"height":200,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Horizontally Center Div in CSS","datePublished":"2024-12-03T09:17:15+00:00","dateModified":"2024-12-03T09:36:35+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/"},"wordCount":1029,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1","keywords":["horizontally center"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/","name":"How to Horizontally Center Div in CSS - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1","datePublished":"2024-12-03T09:17:15+00:00","dateModified":"2024-12-03T09:36:35+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Often web developers need to horizontally and vertically center div in CSS. Here is how to horizontally center div in CSS.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1","width":301,"height":200,"caption":"horizontally center div"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Horizontally Center Div in CSS"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/horizontally-center-div.jpg?fit=301%2C200&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1ug","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=5720"}],"version-history":[{"count":29,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5720\/revisions"}],"predecessor-version":[{"id":5754,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5720\/revisions\/5754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/5741"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=5720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=5720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=5720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}