Hello, My name is Nima Owji. Today, I want to show you "How to put a div in the center of the page using Flexbox". Let's start! Creating The Files First of all, we should create our files. index.html styles.css We will write our styles in "styles.css". Writing HTML Codes OK, now, we should write our HTML codes: Centered Div <!DOCTYPE html> < = = > html lang "en" dir "ltr" < > head < = > meta charset "utf-8" < > title </ > title < = = > link rel "stylesheet" href "styles.css" </ > head < > body < = > div class "container" </ > div </ > body </ > html As you can see here, I linked "styles.css" as a stylesheet and I also created a in the body.  That has a "container" class, we will use this class to add some styles to it! div div After this, we don't see anything because our is empty! div Writing CSS Styles In "styles.css" we should make and tags fullscreen. We will do it by changing the to "100vh". body html height , { : ;
} html body height 100vh They are fullscreen now! After that, we should add a background-color to the to make it visible. We should also add and to that . container div height width div { : ; : ; : ; : ;
} .container background-color #efefef width 70vw height 78vh border-radius 5px I also added a to make it more beautiful! border-radius Now, you should see something like this: We can see this but it's not in the center yet! div Putting the in the Center Div For that, first, we should select and tags and set their to . body html display flex , { : ; : flex;
} html body height 100vh display After that, we should use to put that in the center horizontally! justify-content div , { : ; : flex; : center;
} html body height 100vh display justify-content Now, our page looks like this: It's horizontally in the center but we should put it in the center vertically too. What should we do? We will use for that! align-items , { : ; : flex; : center; : center;
} html body height 100vh display justify-content align-items It's now finished and it's in the center of the page! You can do it in many other ways but it's one of the easiest! You can also add more styles like to the container div to make it more beautiful! box-shadow Finished! Thanks a lot for your reading. If you liked this, please tweet it and mention me too! If you had a question, please don't hesitate to contact me on . Twitter

Twitter

a Full-Stack web developer using asp.net. C#, js, win forms

2021 - HackerNoon Contributor of the Year - CSS

2022 - HackerNoon Contributor of the Year - Instagram

2022 - HackerNoon Contributor of the Year - News

2022 - HackerNoon Contributor of the Year - Product Hunt

Follow me on Twitter!

2021 - HackerNoon Contributor of the Year - HTML

Nominated for 2022 - HackerNoon Contributor of the Year - Product Hunt

Nominated for 2022 - HackerNoon Contributor of the Year - News

Nominated for 2022 - HackerNoon Contributor of the Year - Instagram

Too Long; Didn't Read

Making security fun one episode at a time

How to put a div in the center using Flexbox

How to put a div in the center using Flexbox

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Nima Owji

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to put a div in the center using Flexbox

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Nima Owji

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES