Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

How to Center DIV Elements or Nested Elements

CSS is one of the three core technologies of the World Wide Web, along with HTML and JavaScript. No modern website is complete without CSS because CSS defines the presentation of the user interface.

Though it seems easy, CSS is quite tough to implement in real-time. The reason is that CSS is huge and has many concepts. Moreover, every challenge has more than one solution, sometimes several. Even experienced developers sometimes struggle while implementing CSS. 

One of the common challenges in CSS is to center an element. If you have ever worked with CSS, you likely faced a situation where a div element or a heading needs to be centered. And many developers struggle in doing this simple task. One of the primary reasons for this is that developers do not give enough time to learn the tricks for centering elements using CSS. So in this article, we will provide different ways of centering a div or centering other elements inside a div using CSS.

Different ways to center a div or center elements inside a div

There are several different ways to center a div on the screen or center elements such as paragraphs, headings, or images inside a div. We can do it horizontally, vertically, or both horizontally or vertically. So let’s discuss each of these ways one by one.

Using margin property

One of the easiest ways to center a div horizontally is by using the margin property. Observe the following div element.

A simple green circle DIV element
A simple green circle DIV element

The green circle is the div element and currently, it is not centered. Following is the HTML for the above.

<html>
  <body class="body-css">
    <div class="div-css">
</div>
  </body>
</html>

And following is the CSS.

.body-css {
  border: 2px solid black;
  padding: 60px;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

To center this div horizontally, we can use the margin property and set “auto” as its value. 

.body-css {
  border: 2px solid black;
  padding: 60px;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  margin: auto;
}

With margin as “auto”, the div will be centered with respect to its parent element, i.e. body. 

A centered DIV element using margin auto
A centered DIV element using margin auto

Using flex 

Using flex, we can align the div horizontally, vertically, or both. We have to apply the “flex” as the value of the display property in the parent element. Then, we have to use the justify-content and align-items property in the parent element as well and both of them should have “center” as their values.

.body-css {
  border: 2px solid black;
  padding: 60px;
 
  display: flex;
  justify-content: center;
  align-items: center;
}
.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}
A centered DIV element using CSS flex
A centered DIV element using CSS flex

This way is also useful when we want to center any element inside a div. Observe the following HTML.

<html>
  <body class="body-css">
    <div class="div-css">
      <h3>Hello World!</h3>
    </div>
  </body>
</html>
A centered DIV using CSS flex with uncentered text
A centered DIV using CSS flex with uncentered text

To center the h3 element, we have to apply the flex to its parent element i.e. div. Yes, we have already applied flex to the body element and there is no problem in applying the flex again.

.body-css {
  border: 2px solid black;
  padding: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

Remember, the justify-content property will center the element horizontally while align-items will center vertically.

Centered DIV and text using CSS Flex
Centered DIV and text using CSS Flex

Using text-align property

Using text-align property is the most common way to center a text. In the above example, we centered the h3 element inside the div using the flex, which was also used to center the div itself. Instead of using flex to center the h3 element, let’s try the text-align property.

.body-css {
  border: 2px solid black;
  padding: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  text-align: center;
}

But there is one problem. The text-align property will only center the element horizontally. 

Centered text using the text-align property
Centered text using the text-align property

So, we can use the text-align property, if it is required to center the text horizontally only.

Using transform property

Another way to center an element to its nearest parent element is by using the transform property. In this technique, we give the parent a “relative” position and “absolute” to the child. Then, we provide top, left, and transform properties to the child element with necessary values.

.body-css {
  border: 2px solid black;
  padding: 120px;
  position: relative;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Remember, the top and left property values should always be “50%” while “translate” should be used for the transform property.

Using the transform property to center a DIV element
Using the transform property to center a DIV element

Using grid

The grid system is relatively new, and you can use it to center elements in CSS. In this technique, we have to set “grid” as the value of display in the parent element and define rows and columns. Then, we can use justify-self and align-self properties in the child element and set their values as “center”.

.body-css {
  border: 2px solid black;

  display: grid;
  grid-template-rows: 80vh;
  grid-template-columns: 100vw;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  justify-self: center;
  align-self: center;
}
Centering a DIV element using CSS Grid
Centering a DIV element using CSS Grid

Wrapping it up

So centering elements using CSS is not challenging, and you only need to have the correct understanding of specific CSS properties and their values. In this article, we discussed five ways to center a div or center other elements in a div both horizontally and vertically.

Here is a link to a relatively more advanced example of a centered nested DIV element on codepen.io

Centering DIV Elements or Nested Elements
Centering DIV Elements or Nested Elements

Recommended Articles