DEV Community

Cover image for 5 easy ways to center elements in CSS
Anjan Shomooder
Anjan Shomooder

Posted on

5 easy ways to center elements in CSS

Centering elements in CSS is a very common and important task. Sometimes we struggle a lot to do this simple task. In this blog, you will learn 5 easy ways to center an element in CSS.

I have already made a video about it on my channel. Please check this out for more explanation.

Starter Code

HTML
<div class="parent">
    <div class="children">
        <h2 class="text">Subscribe to Cules Coding</h2>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
    height: 800px;
    background: red;
}

.children {
    height: 50%;
    width: 50%;
    background: cyan;
}
Enter fullscreen mode Exit fullscreen mode

5 easy ways to center elements in CSS

Our target is to center the .children element inside the parent container.

Css Grid

.parent {
    height: 800px;
    background: red;
    display: grid;
    place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Explaination
  • We made the parent container a grid.
  • Place-items property is the shorthand property for align-items and justify-items. align-items handle horizontal alignment and justify-items handle vertical alignment. We have given the value center to both of the properties.

Align Text (extra)

To Align any kind of text use text-align property.

.text {
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Css Flexbox

.parent {
    height: 800px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Explaination
  • We have made the container a flexbox.
  • justify-content will align children horizontally and align-items will align items vertically.

Padding (only vertically)

.parent {
    /* height: 800px; */
    background: red;
    padding: 100px 0;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Explaination
  • Remove height from the parent.
  • Add padding to the top and bottom. Value has to be the same.

Margin (only horizontally)

.parent {
    height: 800px;
    background: red;
    width: 600px;
}

.children {
    height: 50%;
    width: 50%;
    background: cyan;
    margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Explaination
  • Add width to the parent.
  • Set margin 0 to the top and bottom and auto to left and right.

Css postion

.parent {
    height: 800px;
    background: red;
    position: relative;
}
.children {
    height: 50%;
    width: 50%;
    background: cyan;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode
Without transform

Image description

With transform

Image description

Explaination
  • Make the parent position relative.
  • Make the children's position absolute.
  • Move the children down and to right by 50% relative to the parent. Now the children starting position will be the center of the parent.
  • Move the children to the top and left by -50% using css transform.

If you have confusion with Css position then you can watch this video.

That's it, guys. There are other ways you can center elements in CSS. But these are the easiest method. I hope you have learned something new.

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js.
If you are interested you can check the video.

You can also demo the application form here

Screenshot of Insta Carousel

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, please comment down below.
You can reach out to me on social media as @thatanjan.
Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.
Alt Text

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them.
Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch:




Discussion (0)