{"id":194,"date":"2021-11-20T00:32:00","date_gmt":"2021-11-20T00:32:00","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=194"},"modified":"2022-01-15T09:24:39","modified_gmt":"2022-01-15T09:24:39","slug":"how-to-align-div-horizontally-and-vertically-center-using-css","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/how-to-align-div-horizontally-and-vertically-center-using-css\/","title":{"rendered":"How to align div horizontally and vertically center using CSS"},"content":{"rendered":"\n<p>Hello Friends &#x1f64f;, These days Front-end developers are majorly focusing on JS frameworks like React\/Vue\/Angular and ignoring on  basics of CSS &amp; HTML.<br>But there are some of HTML\/CSS tasks, which every front-end developer must know. One of the tasks from that list is to align div horizontally and vertically center on the webpage. This can be very useful in interviews for a front-end job that requires HTML\/CSS as a core skill.<\/p>\n\n\n\n<p>So today in this<strong> CSS Tutorial for beginners<\/strong>, we will look into the options we have to complete the task &#x1f60e;. Hope it will help the you to understand the logic &#x1f44d;.<\/p>\n\n\n\n<p><strong>Chalo suru kiya jaye!<\/strong>&#x1f37b;<strong> Lets start! <\/strong>&#x1f57a;.<\/p>\n\n\n\n<h2>Creating the Basic structure<\/h2>\n\n\n\n<p>First create HTML<gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n   &lt;body&gt;\n      <strong>&lt;div class=\"div-to-align\"&gt;&lt;\/div&gt;<\/strong>\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Now add some stylings to give container a proper look.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Container, that needs to be aligned *\/\n.div-to-align {\n  width: 400px;\n  height: 300px;\n  border: 1px solid #000;\n}<\/code><\/pre>\n\n\n\n<p>Now we can align the div using below <strong>layout options<\/strong>:<\/p>\n\n\n\n<h2>Option 1: Positioned Layout<\/h2>\n\n\n\n<p>In this option we use the position property and then logically place the container at center of the screen.<br><a href=\"https:\/\/jsbin.com\/lepunud\/edit?html,css,output\" target=\"_blank\" rel=\"noreferrer noopener\">Check here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Align div at Center of the Page using CSS Position Layout - Learn HTML, CSS, JS #ytshorts #shorts\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/nrRTBK1AR-U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>.div-to-align {\n  <strong>position: absolute;<\/strong>\n  \/* div position will now be relative to body *\/\n  <strong>left: 50%;<\/strong>\n  \/* div will start half way from left of the page *\/\n  <strong>top: 50%;<\/strong>\n  \/* div will start half way from top of the page *\/\n  <strong>margin-left: -200px;<\/strong>\n  \/* This is half width of the modal div,\n        when we negate it from left, it align div horizontally center *\/\n  <strong>margin-top: -150px;<\/strong>\n  \/* This is half height of the modal div,\n        when we negate it from top, it align div vertically center *\/\n}<gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"578\" height=\"596\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-25.png\" alt=\"align div horizontally and vertically center,align div horizontally center,css tutorial for beginners,flexbox layout\" class=\"wp-image-416\" srcset=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-25.png 578w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-25-291x300.png 291w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-25-150x155.png 150w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<h2>Option 2: FlexBox Layout<\/h2>\n\n\n\n<p>Flexible Box Layout, makes it easier to develop responsive layout structures without using float or positioning. <br><a href=\"https:\/\/jsbin.com\/zucogov\/edit?html,css,output\" target=\"_blank\" rel=\"noreferrer noopener\">Check here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Align div at Center of the Page using CSS Flexbox Layout - Learn HTML, CSS, JS #ytshorts #shorts\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/AGz7J1UScAs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>html,\nbody {\n  \/* Stretch the height of html and body to fill the viewport *\/\n  height: 100%;\n}\n\nbody {\n  <strong>display: flex;<\/strong>\n  \/* This will make body a flex-container*\/\n  <strong>justify-content: center;<\/strong>\n  \/* This will align div horizontally center *\/\n  <strong>align-items: center;<\/strong>\n  \/* This will align div vertically center *\/\n}<gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><\/gwmw><\/gwmw><gwmw style=\"display:none;\"><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"559\" height=\"583\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-26.png\" alt=\"align div horizontally and vertically center,align div horizontally center,css tutorial for beginners,flexbox layout\" class=\"wp-image-418\" srcset=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-26.png 559w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-26-288x300.png 288w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/image-26-150x156.png 150w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p>Thanks &#x1f64f;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to align div horizontally and vertically center using CSS position and flex layout.<\/p>\n","protected":false},"author":1,"featured_media":428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[47],"tags":[12,48,52,49,51,50],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/194"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media\/428"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}