5 easy ways to center elements 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;
}

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

Css Grid

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

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

Css Flexbox

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

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

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

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

With transform

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

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

• Intro & Setup
• Build Homepage UI
• How our app will work
• MDX, MongoDB, Static Homepage
• Generate Static Blog Page
• Style Blog page with Chakra-UI and MDX-embed
• Build a real-time view counter
• Autocomplete search form with MongoDB Atlas Search Index
• Deploy application to Vercel

Demo

You can demo the website from here

Features

• Static Blog pages will make the website load faster.
• Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
• Autocomplete search feature for the blog posts.
• Real-time view counter and so on.

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. I am available on Upwork

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Twitter: @thatanjan
• Upwork: @thatanjan

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers

Videos might you might want to watch: