{"id":2306,"date":"2021-12-21T06:58:03","date_gmt":"2021-12-21T06:58:03","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2306"},"modified":"2021-12-21T11:42:34","modified_gmt":"2021-12-21T11:42:34","slug":"how-to-center-horizontally-and-vertically-across-all-layouts-in-css","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/fr\/how-to-center-horizontally-and-vertically-across-all-layouts-in-css\/","title":{"rendered":"How to center horizontally and vertically across all layouts in CSS?"},"content":{"rendered":"\n

This is one of the most frequently asked questions by newbie web designers; How to truly center an element with CSS? There are three ways that I know of to achieve this \u2014 using transforms, flexbox, or grid. My favorite is the flexbox method, but I\u2019ll show you all three.<\/p>\n\n\n\n

Using Flexbox<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

If you want to center a child element horizontally within its parent, you need to explicitly define the height of the parent element.
justify-content<\/code> defines the alignment of child elements within a flexbox parent element on the x-axis. On the other hand, align-items<\/code> clarify how child elements within a flexbox element are aligned on the y-axis.<\/p>\n\n\n\n

Using Grids<\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The grid method is very similar to the flexbox method. justify-content<\/a> aligns grid items on the x-axis or row, while align-content<\/a> aligns grid content on the y-axis or column. <\/p>\n\n\n\n

This grid method is more useful when you want to center multiple elements in multiple rows and columns. The flexbox method is more suited for elements in single rows or columns.<\/p>\n\n\n\n

Using Transform<\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The position of the child element is set absolute <\/strong>for the transform method. So we can manipulate its positioning. We top:50% and left 50% because absolute positioning in CSS calculates from the top left corner. <\/p>\n\n\n\n

\"\"

Source<\/a><\/figcaption><\/figure>\n\n\n\n

We then use the translate value of the transform property to move the element back half of its width and height, thereby positioning it in the center.<\/p>\n\n\n

Blog Credits: Linda Ikechukwu<\/span><\/p>\n

\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"

This is one of the most frequently asked questions by newbie web designers; How to truly center an element with CSS? There are three ways that I know of to…<\/p>\n","protected":false},"author":10,"featured_media":2323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[269,153,273,270,272,275,274,271],"better_featured_image":{"id":2323,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1800,"height":923,"file":"2021\/12\/css-blog.jpg","sizes":{"thumbnail":{"file":"css-blog-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-150x150.jpg"},"medium_large":{"file":"css-blog-768x394.jpg","width":768,"height":394,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-768x394.jpg"},"penci-full-thumb":{"file":"css-blog-1170x600.jpg","width":1170,"height":600,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-1170x600.jpg"},"penci-slider-thumb":{"file":"css-blog-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-1170x663.jpg"},"penci-magazine-slider":{"file":"css-blog-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-780x516.jpg"},"penci-slider-full-thumb":{"file":"css-blog-1800x800.jpg","width":1800,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-1800x800.jpg"},"penci-thumb":{"file":"css-blog-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-585x390.jpg"},"penci-masonry-thumb":{"file":"css-blog-585x300.jpg","width":585,"height":300,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-585x300.jpg"},"penci-thumb-square":{"file":"css-blog-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-585x585.jpg"},"penci-thumb-vertical":{"file":"css-blog-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-480x650.jpg"},"penci-thumb-small":{"file":"css-blog-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-263x175.jpg"},"jr_insta_square":{"file":"css-blog-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2306,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/css-blog.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"fr","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2306"}],"collection":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/comments?post=2306"}],"version-history":[{"count":3,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2306\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2306\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media\/2323"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media?parent=2306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/categories?post=2306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/tags?post=2306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}