Today I’m gonna show you how you can center and align your content with CSS. Along the way, we’ll look at various alignment techniques. So, let’s get started! 🥇

Table of Contents ->

• How to Use Flexbox to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• How to Use Grid to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• The Transform & position property
• The Margin Property
• Additional resources
• Conclusion

Methods

You can watch this tutorial on YouTube as well if you like:

The Original Article can be found on https://www.freecodecamp.org

But… Wait A Minute!

First of all, let’s understand:

• Main Axis
• Cross Axis

What is the Main Axis in CSS?

You can also call it the:

• X-Axis
• Main Axis
• Horizontal Line

The line from **left **to **right **is the Main-Axis.

Main Axis

What is the Cross Axis in CSS?

You can also call it the:

• Y-Axis
• Cross Axis
• Vertical Line

The line from **top **to **bottom **is the Cross-Axis.

Cross Axis

Project Setup

To experiment with all the properties and values, write the following code in your code editor.

HTML

Write this code inside the body tag:

<div class="container">

   <div class="box-1"> </div>

</div>

CSS

Clear the **default **browser styles so that we can work more accurately:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Select the .container class and set it to 100vh. Otherwise, we can’t see our result on the Vertical Axis:

.container{
   height: 100vh;
}

Style the .box-1 class like this:

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

We’re all set, now let’s start coding!

How to use Flexbox to center anything

We can use Flexboxto align our content div both along the X and Y Axis. To do that, we need to write the display: flex; property inside the .container class:

.container{
   display: flex;

   height: 100vh;
}

We’ll experiment with these 2 properties:

• justify-content
• align-items

How to center anything horizontally using Flexbox

We can use the justify-content property to do this using these values 👇

values of flexbox justify-content property

To experiment with the values, write the following code👇

.container{
   display: flex;
   height: 100vh;

 /* Change values to  👇 experiment*/
   justify-content: center;
}

The result will look like this👇

result of justify-content flexbox

How to center anything vertically using Flexbox

We can use the align-items property to do this using these values 👇

values of Flexbox align-items property

To experiment with the values, write the following code👇

.container{
   height: 100vh;
   display: flex;

 /* Change values 👇 to experiment*/
   align-items: center;
}

The result looks like this👇

Result of align-items flexbox

How to center a div horizontally & vertically using Flexbox

Here, we can combine both the justify-content and align-itemsproperties to align a div both horizontally and vertically.

Write the following codes👇

.container{
   height: 100vh;
   display: flex;

/* Change values 👇 to experiment*/
   align-items: center;
   justify-content: center;
}

The result looks like this 👇

Centering a div Horizontally & vertically

You can check out this cheatsheet to learn more about various Flexbox properties.

How to use CSS Grid to center anything

We can use **grid **to align our content div both along the X and Y Axis. To do that, we need to write the display: grid; property inside the .container class:

.container{
   display: grid;

   height: 100vh;
}

We’ll experiment with these 2 properties:

• justify-content
• align-content

Alternatively, you can use these 2 properties:

• justify-items
• align-items

How to center anything horizontally using CSS Grid

We can use the justify-content property to do this using these values 👇

values of Grid justify-content property

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

  /* Change  values   👇 to experiment*/
   justify-content: center;
}

The result looks like this👇

result of justify-content grid

How to center anything vertically using CSS Grid

We can use the align-content property to do this using these values 👇

Values of CSS grid align-content property

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

  /*  Change values 👇 to experiment*/
   align-content: center;
}

The result will look like this👇

result of align-content grid

How to center a div horizontally & vertically using CSS Grid

Here, we can combine both the justify-content and align-contentproperties to align a div both horizontally and vertically.

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

/* Change  values  👇 to experiment*/
   align-content: center;
   justify-content: center;
}

The result looks like this👇

Centering a div Horizontally & vertically with Grid

Alternative way

You can also use the justify-items and align-itemsproperties to duplicate the same results:

.container{
   height: 100vh;
   display: grid;

/* Change  values  👇 to experiment*/
   align-items: center;
   justify-items: center;
}

The place-content Property in CSS Grid

This is the **shorthand **of 2 properties of CSS Grid->

• justify-content
• align-content

Follow along 👇

.container{
   height: 100vh;
   display: grid;

   place-content: center;
}

We get the same result 👇

Centering a div Horizontally & vertically

Check out this cheatsheet to find out the difference between various Grid properties.

Take a break!

So far so good – take a break.

How to use the CSS Position Property to center anything

This is a combination of these properties ->

• position
• top, left
• transform, translate

Write the following code 👇

.container{
   height: 100vh;
   position: relative;
}

Along with this:

.box-1{
   position: absolute;

   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

First… Understand the center point of a div

By default, this is the center point of a div 👇

Default Center point of a div

That’s why we see this odd behavior 👇

**Box is not at exact center **

Notice that the box is not at the **exact **center in the image above. 👆

By writing this line 👇

transform: translate(-50%,-50%);

We fix the problem 👇

New Center point of our div

And we get this result 👇

Box is at exact center point

What is the Translate property in CSS?

Translate is the shorthand of 3 properties ->

• translateX
• translateY
• translateZ

How to center a div horizontally using CSS Position property

We’re gonna use the left property inside the.box- class. Follow along 👇

.box-1{
/* other codes are here*/	

   left: 50%;
   transform: translate(-50%);
}

And we get this result 👇

result of left & transform property

How to center a div vertically using CSS Position property

We’re gonna use the top property inside thebox- class. Follow along 👇

.box-1{
/* Other codes are here*/	

   top: 50%;
   transform: translate(0,-50%);
}

And we get this result 👇

result of top & transform property

How to center a div horizontally & vertically using CSS position property

To achieve this result, we’re gonna combine these properties together ->

• top, left
• transform, translate

Follow along 👇

.box-1{
/*Other codes are here */	

   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

And we get this result 👇

result of position & transform property

How to use the margin Property to center anything

The margin property is the shorthand of 4 properties

• margin-top, margin-bottom
• margin-left, margin-right

Write this code to set it up 👇

.container{
   height: 100vh;

   display: flex;
}

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

How to center a div horizontally using CSS margin property

We’re gonna use the margin property inside the .box-1 class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: 0px auto;	
}

The result looks like this👇

result of CSS margin Property

How to center a div vertically using CSS margin property

We’re gonna use the margin property inside the .box-1 class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: auto 0px;	
}

The result looks like this 👇

result of CSS margin property

How to center a div horizontally & vertically using CSS margin property

We’re gonna use the margin property inside the.box- class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: auto auto;	
}

The result looks like this👇

Result of CSS margin property

Additional Resources

• Complete Flexbox Tutorial W/ CheatSheet
• Complete CSS Grid Tutorial W/ CheatSheet

Credits

• uncorns, kitty
• artist, kat

Conclusion

Now, you can confidently **align or center **your content using any of these four methods in CSS.

Here’s your **medal **for reading until the end ❤️

#css #web-development #programming #developer