Menu
5 easy ways to center elements in CSS

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>
CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


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


.children {
    height: 50%;
    width: 50%;
    background: cyan;
}

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;
}

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;
}

Image description

Css Flexbox

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

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;
}

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;
}

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%);
}
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.

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 few project based videos with vanilla HTML, CSS, and JavaScript.

You will learn about:

  • Javascript intersection observer to add cool effects
  • DOM manipulation
  • Aligning elements with CSS positions.
  • How to make responsive websites.
  • How to create slide based webpage.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

You can also demo the application from here:

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

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

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. See more of my work from here

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.

Screenshot

Homepage

More screenshots

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:

Previous PostBuild a SpaceX Landing Page Clone with HTML, CSS & JAVASCRIPT
Next PostAdd a video background to your landing page to make it more gorgeous