Frontendroom
Tools
Categories
ShortsAbout
Posted on: February 19, 2023|Amrish Kushwaha

Quick CSS: How to center an element exactly in the center of the screen

Quick CSS: How to center an element exactly in the center of the screen

You want to make a element to be centered aligned in the screen. What are the ways of centering the element in exactly the center in the screen?

Simple!!

Use 4 properties and make any element centered aligned in the your device screen.

display: flex;
justify-content: center;
align-items: center
min-height: 100vh;

HTML and CSS skeleton

CSS

.wrapper {
display: flex;
justify-content: center;
align-items: center
min-height: 100vh;
}

Let's see the HTML code for it =>

<div class="wrapper">
<Any-Element>
</div>

So place any element or div in place of Any-Element and that element or div will be centered aligned of your device screen.

Example: let's make a div centered aligned in the screen

HTML

<div class="object-wrapper">
<!-- Place any object -->
<div class="object-div">
<div class="object">
<h2>Hi, I am centered aligned!</h2>
</div>
</div>
</div>

It's related CSS:

.object-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.object-div {
max-width: 420px;
width: 100%;
}
.object {
background-color: aqua;
padding: 20px;
display: inline-block;
width: 100%;
text-align: center;
}

And the result is:

https://codepen.io/isamrish/pen/BaoPomd

That's all

I hope that you like the article.

Keep coding and keep learning...

About author:

Amrish Kushwaha

Amrish Kushwaha

I am Amrish Kushwaha. Software Engineer, Maker, Writer. I am currently focused on frontend development with curiosity of building end to end software system. Currently I am working at Rafay Systems. I love to write as well as build side projects when I am free.

Related category articles:

How to design a list of responsive cards with equal heights

How to design a list of responsive cards with equal heights

Read

Privacy Preferences

We and our partners share information on your use of this website to help improve your experience. For more information, or to opt out click the Do Not Sell My Information button below.