How to center elements with CSS

If you just dived into web development I am sure that you are also suffering from this.

There are tons of questions on the developer's forum like StackOverflow where people answered these questions nicely that how they center their elements but you will find that most of them don't explain why their method works and why some time that don't.

I am here just summarize all possible ways to center an element and also let you know why and where to use them.

1. Center using margin

The easiest way to center an element is margin: 0 auto; what this means that we are setting top-bottom margin 0 and left-right to auto.
Below snippet will clear the above statement.

.container {
    margin: 0 auto;
    width: 700px;
}

/* That means */

.container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
}

The best thing about this method is that we don't need any parent element to trigger this style. Good to use when you are creating a container or wrapper.
so, here comes the restriction this method only works if we provide width to that element.
Because we are providing left and right margin auto hence we need to give it a specific width so that browser can provide left-right margin to it.

2. Center using text-align

If you have content inside a parent element and you just want to center that, then this method will be good. In sort text-align: center; works as it is written means works only with text or image or anything inside that parent component. It won't center that element it center the content inside that element.

You need to have a parent element to use this method.

.i-am-text {
     text-align: center;
}

3. Center using grid and flexbox

This method requires you to have knowledge of the grid or flexbox, this is an advanced method. Flexbox and grid make centering elements easy and handier.

with flexbox or grid, centering elements horizontal and vertical is also handy.

Let me provide some examples.

4. Center using position

The CSS position property is amazing if you know how to use them. CSS Position absolute property is widely used when we want to animate an SVG on a webpage at any place or just want to place elements anywhere on the page.
But with great powers comes great responsibility :p with position absolute the element will leave its flow from the page I mean it will be no more inside the container, The element is no more in the flow we can manage to put it anywhere, but also it will make problem in responsive you have to add media queries for appropriate screen sizes.

.wrap {
  background-color: #FF4136;
  width: 300px;
  height: 300px;
  /* magic begins more here */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Let's start with the position I put the position absolute now we have full control over wrap element and put left:50% left 50% will move the element exactly at the center of the main container where this element belongs! and top:50% top:50%, the div will be pushed down 50% from the top and now we using transform: translate(-50%, -50%); now this box is absolutely centered vertically within its container using translate(-50%,-50%) and we have a center div, center horizontal and vertical.

feedbacks and suggestions are always welcome 🤗

Links you should check

• margin - CSS: Cascading Style Sheets | MDN
• text-align - CSS: Cascading Style Sheets | MDN
• grid - CSS: Cascading Style Sheets | MDN
• Flex - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• position - CSS: Cascading Style Sheets | MDN

My other blogs

• Scope of TailwindCSS