Abhijeet Gautam's Blog

How to center an absolute-positioned div (with variable width size)

How to center an absolute-positioned div (with variable width size)

Abhijeet Gautam's photo
Abhijeet Gautam
·

3 min read

Hello, world!

Today we are going to learn how to center a div that is positioned 'absolute' with respect to its parent element. Suppose you have to create a layout like this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center an absolute-positioned div</title>
</head>
<body>
  <div class="banner"></div>
  <main class="content"></main>
</body>
</html>

The layout consists of a banner and a main-content container. We have to place the main element (class="content") in such a way that:

  1. half of its height is located over the banner and the rest is half over the body.

  2. it remains at the center even if the window size changes.

The 1st goal is achieved simply by positioning the body as relative and the main element as absolute. Now the main will be positioned absolutely with respect to the nearest parent (i.e. the body in this case). Set the distance of the main element from the top accordingly. The CSS up to this stage will look like this.

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  text-align:center;
}
body{
  position:relative;
  background-color:green;
}
.banner{
  height:150px;
  background-color:orange;
}
.content{
  background-color:white;
  border:2px solid black;
  border-radius:10px;
  width:70%;
  height:80px;
  position:absolute;
  top:110px;
}

Now the next goal is to center the main element such that it always remains at the center irrespective of the window size. Since the main element has no fixed size, margin: auto will not work. We tackle this situation cleverly in 2 steps. In the .content,

  1. set its distance from the left as 50% (i.e. left: 50%).

  2. translate it to the left by 50% (i.e. transform: translate(-50%,0)).

The final CSS looks like this:

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  text-align:center;
}
body{
  position:relative;
  background-color:green;
}
.banner{
  height:150px;
  background-color:orange;
}
.content{
  background-color:white;
  border:2px solid black;
  border-radius:10px;
  width:70%;
  height:80px;
  position:absolute;
  top:110px;
  left:50%; //for achieving goal-[2]
  transform:translate(-50%,0); //for achieving goal-[2]
}

Explanation of the code

Now let us understand the working of the code.

The left property works on the width of the body whereas the transform property works on the width of the actual main element (.content container). Let us consider that the body is X pixels wide and the main element is Y pixels wide. To center the main element, we need to have (X-Y)/2 spacing on each side.

  1. After we set left:50%, the left spacing of main becomes X/2.

  2. after we set transform: translate(-50%,0), the main element translates to the negative x-direction by 50% of the element width. So the main element translates back to the left by a distance of Y/2. Now the new left spacing of the main element becomes X/2 - Y/2 = (X-Y)/2.

Since we are working with percentages, so this code works irrespective of the width of the body.

Conclusion

I hope you enjoyed reading this post. I am currently learning web development and intend to share whatever I learn, on this platform. Do check out my GitHub profile and follow me on Twitter.

See you at the next one!

CSSFrontend Development