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

Copy
1<div class="parent">
2    <div class="children">
3        <h2 class="text">Subscribe to Cules Coding</h2>
4    </div>
5</div>

CSS

Copy
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7.parent {
8    height: 800px;
9    background: red;
10}
11
12.children {
13    height: 50%;
14    width: 50%;
15    background: cyan;
16}

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

Css Grid

Copy
1.parent {
2    height: 800px;
3    background: red;
4    display: grid;
5    place-items: center;
6}

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.

Copy
1.text {
2    text-align: center;
3}

Css Flexbox

Copy
1.parent {
2    height: 800px;
3    background: red;
4    display: flex;
5    justify-content: center;
6    align-items: center;
7}

Explaination

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

Padding (only vertically)

Copy
1.parent {
2    /* height: 800px; */
3    background: red;
4    padding: 100px 0;
5}

Explaination

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

Margin (only horizontally)

Copy
1.parent {
2    height: 800px;
3    background: red;
4    width: 600px;
5}
6
7.children {
8    height: 50%;
9    width: 50%;
10    background: cyan;
11    margin: 0 auto;
12}

Explaination

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

Css postion

Copy
1.parent {
2    height: 800px;
3    background: red;
4    position: relative;
5}
6.children {
7    height: 50%;
8    width: 50%;
9    background: cyan;
10
11    position: absolute;
12    top: 50%;
13    left: 50%;
14    transform: translate(-50%, -50%);
15}

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

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

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

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram : @thatanjan
• Twitter: @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: