{"componentChunkName":"component---src-templates-post-post-jsx","path":"/blog/center-align-things-with-css","result":{"data":{"markdownRemark":{"html":"

Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS 😐.\nSo I decided to write a few ways of aligning content to the center using CSS πŸ˜ƒ.

\n

Center aligning text in CSS.

\n

So let's start with the easy one aligning text to the center of the screen. To do this just use the style text-align:center on the specific tag you want to align the text to the center.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <body>\n\n    <h1 style=\"text-align: center;\">πŸ” is center aligned</h1>\n    <p>πŸ’ still in left</p>\n\n    </body>\n</html>
\n

aligning content to the center

\n

Now let's get into a little complicated stuff. Aligning a div or any content to the center. So the trick is using margin:auto and giving a specific width to the div. This will get the div aligned horizontally center to the parent element.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .box{\n            height:25rem;\n            background-color: blueviolet;\n            width: 25rem;\n            margin: auto;\n        }\n    </style>\n    <body>\n            <div class=\"box\"></div>\n    </body>\n</html>
\n

To align an image to the center for an img tag you need to just add one more CSS property that is display:block.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .imgCenter{\n            display: block;\n            background-color: blueviolet;\n            margin: auto;\n        }\n    </style>\n    <body>\n            <img class=\"imgCenter\" src=\"https://i.chzbgr.com/full/7588073728/h78549C5D/not-sure-if-i-hate-css-or-i-hate-designers\"/>\n    </body>\n</html>
\n

Suppose you want to align a div both vertically and horizontally to the center of the parent element then you can do that with the below code.

\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.centerBox {\n  margin: 0;\n  position: absolute;\n  background-color: blue;\n  height:15rem;\n  width:15rem;\n  top: 50%;\n  left:50%;\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n</style>\n</head>\n<body>\n  <div class=\"centerBox\"></div>\n</body>\n</html>
\n

Using flex to align content to the center

\n

A still better way of aligning content to the center is by using the flex properties.

\n

Suppose you want to align a div horizontally to the center of the parent element. Then you need to apply the display: flex; align-items: center; justify-content: center; properties to the parent element.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .box{\n            width: 100px;\n            height: 100px;\n            background-color: blueviolet;\n        }\n      \n    </style>\n    <body>\n          <div class=\"container\">\n              <div class=\"box\"></div>\n          </div>  \n    </body>\n</html>
\n

Suppose you want to vertically and horizontally align a div to the center of the parent element then you need to add the following style to html and body tag.

\n

html, body { height: 100%; } and give some height to the parent element.

\n

That's it your content should be vertically and horizontally aligned to the parent element. The below snippet shows how a div can be aligned to the center.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        html, body {\n            height: 100%;\n        }\n        body{\n            margin: 0;\n        }\n        .container {\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .box{\n            width: 100px;\n            height: 100px;\n            background-color: blueviolet;\n        }\n      \n    </style>\n    <body>\n          <div class=\"container\">\n              <div class=\"box\"></div>\n          </div>  \n    </body>\n</html>
\n

Congrats we are at the end of this post. I hope you enjoyed the topic.

","timeToRead":3,"frontmatter":{"title":"Center aligning content with CSS and flex-box","date":"15 May 2020","tags":["html","css","reactjs"],"path":"blog/center-align-things-with-css","excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v11h72V52h-72v12m81%203v14h73V52h-73v15m-46%2014c-40%200-36-1-35%2010v5h72v-8l-1-7h-36M41%20109v26h72V83H41v26m82-25v82c0%202%203%202%2036%202h36V83h-36l-36%201m166%2012v10h73V86h-73v10m-82%206v13l1%2012h72v-26h-36l-37%201m83%2015c-1%2010-5%209%2036%209h35v-15h-71v6m-82%2033v18h153v-36H208v18m-167%203v14h36l36%201v-29H41v14m10%2032c-15%203-14%2026%200%2030%207%202%2017-4%2017-9%200-4-5-4-9%200-6%206-15-4-9-11%203-4%206-4%209-1l6%203c3%200%203%200%203-3-2-7-10-11-17-9m30%201c-9%206-4%2018%206%2018%203%200%205%201%205%203-1%202-7%201-8%200l-5-2c-7%200-1%2010%207%2011s13-3%2013-11c0-5-2-7-9-8-6-1-6-1-6-3%201-2%205-2%207-1l4%202c3%200%203-1%203-3-1-7-10-10-17-6m31-1c-5%203-7%2011-3%2015%201%201%204%203%207%203l6%203c0%203-7%203-7%201-1-3-8-3-8%200%200%207%209%2011%2017%208%209-4%208-16-2-18-6-1-7-1-7-3s5-3%206%200c1%202%208%202%208-1%200-7-9-11-17-8m74%200l-3%201v29h18v-7h-10v-11c0-12%200-13-5-12m123%201c-14%207-9%2030%207%2030l6-2c14-7%209-30-6-30l-7%202m-154%2014v15h8v-9h4c4%200%205-1%205-4v-4h-4c-5%200-5%200-5-3s0-3%205-3h5v-7h-18v15m55-12v28l9-1h9v-7h-5c-6%200-6%200-6-2%200-3%200-3%205-3h5v-3c0-4%200-4-5-4-7-1-6-3%201-4h5v-7h-18v3m26-3l4%207%204%207-4%207c-6%209-6%209-1%209%204%200%205%200%207-4l2-4%202%202%203%204c0%202%209%203%209%201l-4-8-5-7%204-6c5-8%205-8%200-8-4%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015v15h9c8%200%209%200%2011-2%203-3%204-8%202-11-2-2-2-3-1-5v-6c-2-5-4-6-13-6h-8v15m69-11c6%2010%206%2010%201%2017-5%208-5%209%200%209%204%200%204%200%206-4%203-5%204-5%206%200%201%203%202%204%206%204%205%200%205%200%200-9l-5-7%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-2-4-7-4h-4l3%204m-27%205c-6%204-2%2014%204%2014%203%200%206-4%206-8s-3-8-6-8l-4%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.4970059880239521,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/a7715/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/8f7df/flexbox-css.jpg 250w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/0f3a1/flexbox-css.jpg 500w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/a7715/flexbox-css.jpg 1000w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"path":"blog/react–the-future-of-web-frontend","title":"React – The Future Of Web Frontend","tags":["reactjs","javascript","typescript","html","css"],"excerpt":"Working with ReactJS - A library by facebook was a great experience for me. React has made building web apps easy by making use of reusable components. This is clearly my viewpoint about the library.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m66-36c-3%203-3%206-3%2015l1%207-5%202c-11%203-15%2011-11%2017%202%203%2012%208%2014%208%201%200%202%202%201%209-1%2017%207%2020%2021%2010l5-4%204%203c5%205%2012%207%2015%206%206-2%207-7%206-21%200-2%200-2%205-4%207-3%2012-8%2012-12s-6-10-13-12l-5-2%201-6c2-12-2-19-10-18l-15%208c-1%201-2%201-4-1-7-7-15-9-19-5m2%203v17h6c4%200%205-1%208-5%204-5%204-5-3-10-5-3-9-4-11-2m32%201l-5%204-3%203%203%204c2%204%203%204%2010%205%204%201%205%201%206-7%201-9-4-13-11-9m50%207c-1%202-2%203-2%2025%200%2025%200%2027%206%2027%205%200%206-1%206-12v-9h8c9%200%2012%202%2012%209%200%209%204%2014%2010%2012%203-1%203-2%202-11-2-12-2-12-5-13l-2-2%202-1c9-5%208-20-2-24-6-3-31-3-35-1m183%204l-1%205c0%203%200%204-3%205-4%201-4%205%200%206h3v13c0%2017%201%2019%2011%2019%205%200%208-1%208-4%200-2-3-4-6-4h-2v-24h3l4-1c1-3%200-5-4-5-3%200-3%200-3-4%200-6-1-8-5-8-3%200-4%201-5%202m-173%2011l1%208%208-1c10%200%2012-1%2012-7-1-6-3-7-13-7h-8v7m-83%203l-3%207%203%205c4%208%205%208%2013%208h6l4-7%203-7-3-6-4-5-7-1h-8l-4%206m140-5c-6%201-7%201-11%204-9%209-8%2027%203%2033s32-1%2026-9c-2-3-3-3-7%201-5%203-12%203-15-1-5-6-4-6%209-6%2014%200%2016%200%2017-4%202-9-11-20-22-18m42%200c-8%201-14%208-11%2012%202%201%205%201%207-1%204-5%2015-5%2015%200%200%204-2%205-9%205-12%202-16%205-16%2013%200%2010%2013%2014%2023%207l3-2%201%203c1%202%207%203%209%201%201-1%200-31-2-33-2-4-11-6-20-5m44%200c-16%203-21%2029-6%2037%208%205%2021%202%2025-5%204-6-3-10-8-4-3%204-8%204-12%201s-4-15%200-19c4-3%208-3%2012%201%207%206%2013%201%207-6-4-4-10-6-18-5m-246%205c-10%205-9%2011%203%2015l6%202%202-5c2-5%202-5%200-10-3-6-4-6-11-2m53%202c-2%205-2%206%200%2010%202%206%203%206%2010%202%2010-5%209-10-1-15-7-3-7-3-9%203m-26%200c-3%203-3%207%201%2010%203%203%206%203%209%200s3-6%200-9c-3-4-7-4-10-1m131%201l-4%204c-2%204-1%204%2010%204%207%200%207-1%207-2-1-5-9-9-13-6m49%2015c-9%201-12%205-6%209%205%203%2013-2%2012-8v-2l-6%201m-196%206c-2%205-1%2014%201%2015%202%203%204%202%209-1%208-5%208-6%204-11-5-5-13-7-14-3m33-1c-3%200-9%206-9%209l10%208c7%203%2010-2%208-13-1-5-1-5-9-4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png","srcSet":"/static/ca31f74a20da556b69057d20ff6abaf2/6d161/preview.png 150w,\n/static/ca31f74a20da556b69057d20ff6abaf2/630fb/preview.png 300w,\n/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png 600w,\n/static/ca31f74a20da556b69057d20ff6abaf2/db955/preview.png 900w,\n/static/ca31f74a20da556b69057d20ff6abaf2/f3583/preview.png 1200w,\n/static/ca31f74a20da556b69057d20ff6abaf2/eeb1b/preview.png 1920w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/why-i-migrated-my-website-from-wordpress-to-gatsby","title":"Why I migrated my website from wordpress to gatsby? (gatsby vs wordpress)","tags":["javascript","gatsby","typescript"],"excerpt":"While building a CMS for blogging, worpdress is the most commonly used platform. Gatsby has also topped the list recently. This article talk which one to go for and why I shifted from wordpress to gatsby. Is gatsby better than wordpress is the question I would be answering.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m170-45c-4%203-5%208-5%2020l1%209-6%202c-11%205-19%2013-18%2019%202%206%209%2012%2019%2016l5%201v12c-1%2013%201%2017%207%2020h8c4-1%2017-9%2019-11l7%204c14%2011%2025%2010%2028-3%201-5%201-13-1-19l8-6c21-10%2021-22%200-32l-8-3%201-5c4-26-9-35-29-19l-6%204-5-4c-11-8-19-10-25-5m3%204c-3%203-4%2021-1%2023l8-1c7-1%207-1%2012-7l4-6-3-3c-3-3-14-8-16-8l-4%202m44%200c-5%202-12%208-12%209l5%207c4%205%204%205%2011%206l8%201%201-10c0-14-3-17-13-13M64%2074c-11%204-21%2013-26%2024-5%2010-5%2026%200%2036%2019%2037%2072%2029%2080-12%204-20-10-41-30-47-6-2-18-2-24-1m248%201c-15%203-30%2016-33%2031-9%2041%2041%2069%2070%2040s3-78-37-71m2%204c-7%201-14%205-20%2010-6%206-6%207%202%206l6%201-2%202c-4%200-4-1%203%2019%208%2024%207%2023%2012%2010%203-11%203-12%202-16-2-9-5-13-8-13l-2-1c1-2%2023-2%2024-1l-1%202h-3c-2%201-1%205%205%2021l7%2019%203-11c4-13%204-18-1-25-3-5-3-9%200-12l3-3-3-2c-7-5-17-7-27-6M66%2084c-7%202-14%208-18%2014-6%2010-7%208%2015%2029l20%2020c3%201%2011-3%2017-9%205-5%209-13%209-20v-3H99l-10%201-1%202v3h7l8%201c0%205-12%2019-17%2019l-19-18-17-17%202-3c9-16%2029-20%2042-8%205%204%205%204%207%202s2-2-2-5c-8-9-22-12-33-8m128%2014c-5%200-4%200-11%2011l-4%207%203%205%205%2010%203%204h10c11%200%2011%200%2016-10%206-9%206-9%200-18l-5-8-6-1h-11m159%206l-13%2042c-3%207%2010-5%2014-14%203-7%204-24%201-29l-2-3v4m-191%200c-18%207-18%2016-2%2023%207%204%207%204%2010-4l3-7-3-7-2-7-6%202m68%205l-2%208%202%206c2%207%203%207%205%206%208-1%2018-9%2018-13%200-2-6-8-12-11-9-4-8-4-11%204m54-4c-5%2012%200%2029%2011%2039%206%206%209%207%207%202a3395%203395%200%2001-16-44l-2%203m-88%202c-6%203-8%208-5%2013%204%2011%2020%208%2020-4%200-4-4-10-7-10l-3-1-5%202M43%20121c2%209%209%2019%2018%2024%203%202%2013%204%2013%203l-29-30c-2-1-2-1-2%203m277-1a644%20644%200%2001-10%2031c0%203%2017%204%2021%201%201%200%200-4-4-14l-7-18m-149%2018c-1%203-1%2018%201%2021%203%205%2012%203%2021-4l3-4-5-6c-5-5-5-6-10-6l-7-2-3%201m50%200c-6%202-8%202-10%205l-5%206-2%202%205%205c10%207%2018%208%2020%202%202-4%201-21-1-21l-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg","srcSet":"/static/245aecc3e8c42b31f1e4796cebebd2ce/aabdf/gatsby-wordpress.jpg 150w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/9dc27/gatsby-wordpress.jpg 300w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg 600w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/f9913/gatsby-wordpress.jpg 750w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/promises-in-javascript","title":"Working with promises in Javascript","tags":["javascript","typescript","nodejs","reactjs"],"excerpt":"Let's talk about promises in javascript. What exactly is a promise in javascript and how to handle promises. This article will talk about the different methods to resolve promises.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='244'%20viewBox='0%200%20400%20244'%20preserveAspectRatio='none'%3e%3cpath%20d='M187%2010c-16%204-29%2017-33%2034l-1%205h-8c-9%200-10%201-11%208l-2%208-1%205h-6c-14%200-24%2013-28%2038-3%2020-1%2029%206%2029l2%201-13%2043c-13%2040-15%2048-12%2051%202%202%20235%202%20237-1%203-2%202-8-6-33l-8-25%205-1c8%200%2010-1%2011-3%204-5%203-7-1-13-12-14-16-26-17-50-1-20-2-24-12-33l-5-5h-41v-2c9-33-23-65-56-56m-46%2051c-1%206-4%2014-6%2016l-8%201c-7%200-8%200-11%203-7%206-12%2022-12%2039v9h8l7%202-8%2033-9%2033%202%207%202%207h11l-6-1-3-1c3%200%203%200%202-3l-1-3a214%20214%200%200136%201l-4%203-2%202h48l-25%201-25%201h23a281%20281%200%200127%200c-1-1%200-1%201-1h24l4-1c5-2%2010-2%2024-1l32%203h20l1-7%202-7-4-16-4-16%2014-1%2013-1-3-4a87%2087%200%2001-18-53c-1-18-2-23-9-28l-4-3h-64l3%207%203%209%201%203-7-1c-9%200-15%202-16%206l-1%203-15-1h-14l1-4c2-13%206-17%2014-13l3%202%201-2c3-4%204-13%204-21v-6l-26-1h-26v5m85%2042c0%2010%201%2013%204%2014l3%201h2l2-1h2l1%201%201-2%201%201v1l1-1h3l2-1%203-1%203-1%201-1h3l1-1h-1c-1%200-1-1%201-2v-2h-2c0-2-2-4-4-3l-2-1c-1-1%200-1%203-1l-6-1-14-1c-3-1-4-1-4%201l-2%202c-2-1-1-4%201-4%201-1%201-1-1-1-2-1-2-1-2%204m-85%2062l-3%2011c-2%201-6%201-8-1h-5l-4%203c0%204%2016%205%2022%202%204-2%205-4%207-14%201-12%202-11-3-11h-5l-1%2010m20-8c-7%204-3%2010%207%2013l8%203c2%204-8%205-13%202-3-2-11%200-9%203%205%206%2027%205%2030-1%203-5%200-9-10-12-7-2-8-3-7-5h13l3-2-3-1c-4-3-15-3-19%200m48%2031c-4%202-9%206-9%208l3-1c5-5%2010-5%2023-4l15%202c8%202%205%200-5-2-12-4-22-5-27-3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6483516483516483,"src":"/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png","srcSet":"/static/c2e2602606aecbaead43ebcb31d5fc22/6d161/javascript.png 150w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/630fb/javascript.png 300w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png 600w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/5e6f2/javascript.png 789w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]}},"pageContext":{"postPath":"blog/center-align-things-with-css","translations":[{"hreflang":"en","path":"/blog/center-align-things-with-css"}]}}}