Css flex align items center height 100

How to Center Anything in CSS Using Flexbox and Grid ✨

Joy Shaheb

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

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

First of all, let’s understand:

What is the Main Axis in CSS?

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

What is the Cross Axis in CSS?

The line from top to bottom is the 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:

CSS

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

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

Style the .box-1 class like this:

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

How to use Flexbox to center anything

We can use Flexbox to 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:

We’ll experiment with these 2 properties:

How to center anything horizontally using Flexbox

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

To experiment with the values, write the following code👇

The result will look like this👇

How to center anything vertically using Flexbox

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

To experiment with the values, write the following code👇

The result looks like this👇

How to center a div horizontally & vertically using Flexbox

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

Write the following codes👇

The result looks like this 👇

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:

We’ll experiment with these 2 properties:

Alternatively, you can use these 2 properties:

How to center anything horizontally using CSS Grid

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

The result looks like this👇

How to center anything vertically using CSS Grid

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

The result will look like this👇

How to center a div horizontally & vertically using CSS Grid

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

The result looks like this👇

Alternative way

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

The place-content Property in CSS Grid

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

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

First. Understand the center point of a div

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

That’s why we see this odd behavior 👇

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

What is the Translate property in CSS?

Translate is the shorthand of 3 properties ->

How to center a div horizontally using CSS Position property

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

How to center a div vertically using CSS Position property

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

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

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

How to use the margin Property to center anything

The margin property is the shorthand of 4 properties

Write this code to set it up 👇

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 👇

The result looks like this👇

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 👇

The result looks like this 👇

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 👇

The result looks like this👇

Additional Resources

Credits

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 ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

Источник