{"id":892,"date":"2022-02-12T10:55:58","date_gmt":"2022-02-12T04:55:58","guid":{"rendered":"https:\/\/mellowhost.com\/blog\/?p=892"},"modified":"2022-02-12T10:55:58","modified_gmt":"2022-02-12T04:55:58","slug":"how-to-center-an-element-in-full-screen-with-tailwind-css","status":"publish","type":"post","link":"https:\/\/mellowhost.com\/blog\/how-to-center-an-element-in-full-screen-with-tailwind-css.html","title":{"rendered":"How to center an element in full screen with Tailwind CSS"},"content":{"rendered":"\n

After a lot of system administration and backend programming stuffs on this blog, let’s check some experiences with frontend and designing.<\/p>\n\n\n\n

Tailwind is my favorite most used CSS framework. A common thing, I face on centering an element on the screen. There are a couple of ways to do it. First, we can actually use flex and horizontal and vertical center to put the element in the center, and use h-screen to take the height of full screen like following:<\/p>\n\n\n\n

    <div class=\"h-screen flex justify-center items-center\">\n        <div>\n            Element on the center of the screen\n        <\/div>\n    <\/div><\/pre>\n\n\n\n
There are other ways to do it as well. You can set the flex and h-screen to the container, and m-auto to allow margin to put your inside element center of the screen, like the following:<\/p>\n\n\n\n
<div class=\"h-screen flex\">\n    <div class=\"m-auto\">\n        Element on the center of the screen\n    <\/div>\n<\/div><\/pre>\n\n\n\n
Then, you probably want to put the content as a modal. To use the modal, you need to set the position absolute. Here is how you may do this:<\/p>\n\n\n\n
<div class=\"relative\">\n    <div class=\"absolute inset-0 h-screen flex\">\n        <div class=\"m-auto\">\n            Element on the center of the screen\n        <\/div>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
or like the following:<\/p>\n\n\n\n
<div class=\"relative\">\n    <div class=\"absolute inset-0 h-screen flex justify-center items-center\">\n        <div>\n            Element on the center of the screen\n        <\/div>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
Hope this helps to someone, and myself specially when I forget after a while, on how to create a center modal in Tailwind \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
After a lot of system administration and backend programming stuffs on this blog, let’s check some experiences with frontend and designing. Tailwind is my favorite most used CSS framework. A common thing, I face on centering an element on the screen. There are a couple of ways to do it. First, we can actually use … Continue reading “How to center an element in full screen with Tailwind CSS”<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[681,680],"tags":[685,683,682,684],"_links":{"self":[{"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/posts\/892"}],"collection":[{"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":3,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/posts\/892\/revisions"}],"predecessor-version":[{"id":895,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/posts\/892\/revisions\/895"}],"wp:attachment":[{"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/media?parent=892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/categories?post=892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mellowhost.com\/blog\/wp-json\/wp\/v2\/tags?post=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}