5 way to center anything with CSS

Do you still have trouble centering anything? Believe me, I've had this problem before. Every time I am searched the internet to see how to center the container. Then I learned about so many methods that now I don't have any problems. So today I want to tell you about some methods so that you don't have any difficulty in centering something later. Let's take a look.

Method 1: Flexbox

Flexbox is the most popular method for modern web design. Here we will make the container a flexbox and easily center it horizontally and vertically.

First, flex the display and center the element with justify-content for the X axis and align-items for the Y axis.

.box {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
}

This method does not require the size of the element. The flexbox method allows one or more items to be centered within a container. You can use this method to center any inline or block element.

Method 2: Grid

Like the Flexbox, the grid is a simple method. We will bring it to the container center with just two lines of code.

Place the display on the grid. In the flexbox method, we would center the container horizontally and vertically separately. Here too, there is no need to use additional properties. Just using the place-items will do the work of the justify-content and the align-items. Here, the place-items centers from both sides.

.box {
   display: grid;
   place-items: center;
   min-height: 100vh;
}

If you want, you can also control it separately like in flexbox. In that case, you will use the justify-content and the align-items.

.box {
   display: grid;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
}

Method 4: Transform

This is a little bit old style. I learn about this method first. so it's my favorite method.

This method is the best to use when the dimension of the container as well as the element is unknown. You can use this method to center both inline and block elements. We set the top and left 50% to center the container position. To further adjust the positioning we translate to the top right by 50% of its own height and width.

.box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

The container will always be exactly in the center of the browser screen using this method.

Method 3: Margin Auto

If you only need to center horizontally, you can use Margin Auto. Here I will show you how to use it both ways.

This method is the best to use when the dimension of the container is unknown but the dimension of the element is known. It fails to work when the dimensions of the element are not defined. Now that the dimensions are defined, the browser can split the remaining space between the margins. This method is perfect for centering block elements of fixed height and width.

.box {
  position: absolute;
  margin:auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Method 5: Clamp

You can use this method for responsive design. Nothing new. This method is a combination of margin auto and clump function.

The same properties that we used in the Margin Auto method will be used here. I have added an extra thing here, which is the clamp function. Here the container will always be in the center, and the container size will change with the screen size.

.box {
  width: clamp(200px, 50%, 600px);
  margin: auto;
  text-align: center;
  position: absolute;
  margin:auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

I hope you guys enjoyed this tutorial. You can stay updated with the latest tutorials by subscribing to us on YouTube. Enjoy Coding!