How to Center an Absolute Div Using CSS
- Center Elements Using CSS
-
Center an Element Horizontally Using the
absoluteProperty -
Center an Element Vertically Using the
absoluteProperty -
Center an Element Both Horizontally and Vertically Using the
absoluteProperty - Conclusion
CSS (Cascading Style Sheets) is used in defining styles for HTML elements and how they should display on adapting to the different devices and screen sizes. Using CSS saves a lot of work as it can control the layout of multiple pages at once.
Let’s see how it centers the elements within a div class using the absolute property.
Center Elements Using CSS
If we want to center any text, image, box, or group of elements, we must position them vertically and horizontally. Even though it seems the centering is simple with horizontal and vertical positioning, the steps we have to follow are somewhat tricky.
We can use text-align: center; with inline and margin: 0 auto; with block elements to center elements horizontally. Using the absolute property in CSS, we can also center one element or group of elements vertically, horizontally, or vertically and horizontally.
Use the absolute Property
Unless we specify a position for elements to exist, they remain static by default. The top, left, right, and bottom properties do not work with this.
So, the HTML elements in static are non-positioned and appear as they are in the markup language. But with the absolute property, elements are positioned and behave like they are not there.
The space of the absolute positioned element is taken away from it and assigned to another, while the absolute positioned element takes space on its own.
Let’s assume our HTML code is as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Center an Absolute div</title>
</head>
<body>
<div class="container">
<div class="green-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
As in the above code snippet, it has mentioned that the document type is html and opened both <html> and <head> at the beginning. After that, it defines the meta charset enabling access to different characters.
Then the CSS file named style is linked with the current HTML file using href, and within the <title> displayed a title Center an Absolute div. Next, we have to open the <body> once after closing the <head>.
In the <body>, a div class is opened named container and two more are created green-box and blue-box. At the last part, the <div>, <body>, and <html> tags are the closing sequent.
style.css Code:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
}
.orange-box,.purple-box {
width: 100px;
height: 100px;
}
.orange-box {
background-color: orange;
}
.purple-box {
background-color: purple;
}
The above code snippet is the code inside the style.css.
At first, we created a green bordered container with defined properties. Next, we built two boxes in orange and purple colors with 100px width and height.
Output:
Customizing the properties inside the boxes in the style.css file, we can center them horizontally, vertically, or both horizontally and vertically.
To get a clear idea, let’s customize only the purple box. For centering the elements, you can modify the above code per the use cases mentioned below.
Center an Element Horizontally Using the absolute Property
Example Code:
.purple-box {
background-color: purple;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Output:
According to the above snippet, we have positioned the purple box using the absolute property, while the values for left and right are 0. Also, the top and the bottom margins are 0, while both left and the right margins are auto.
Therefore, it takes an automatic margin for the width of the object.
As we can see in the output, the purple box is horizontally centered using the absolute position property.
Center an Element Vertically Using the absolute Property
Example Code:
.purple-box {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Output:
With the above code snippet, we have set the purple box vertically centered using the absolute property in the position and setting up the values for the top and the bottom as 0. Also, set the margin value auto for both top and bottom while the margin value is 0 for left and right.
After customizing the purple box as the above code, we can place it vertically centered using the absolute property shown in the above output.
Center an Element Both Horizontally and Vertically Using the absolute Property
Example Code:
.purple-box {
background-color: purple;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
Output:
This method is a collection of the above methods. To center the purple box horizontally and vertically, we have set the value 0 for right, left, top, and bottom after setting up the position as absolute.
Then we assigned auto as the margin value for the top, bottom, left, and right.
Adapting the above method, we can center the purple box vertically and horizontally relative to the page. But here, we are using a container.
If we want to center the purple box appropriate to the green-bordered container, we have to define the relative position inside the properties of the container as below.
Example Code:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
position: relative;
}
Output:
The above three instances are the main three instances in centering an element, and we have defined the width for the purple box in each example.
Apart from that, if the width is unknown, we can use the transform method with relative scales, and using it performs best in being responsive and flexible rather than specifying a value for width.
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
transform: translate(0, -50%);
In this method, the left scale in the translate function goes with the x-axis while the other scale goes with the y-axis. According to the scale, the element is responsive.
Conclusion
Using the absolute property, we can resize the blocks and act responsive according to the percentages. Throughout this article, we have discussed centering the elements horizontally, vertically, and horizontally and vertically through an example.
Rather than static elements, the absolute positioned elements do not respect the container where we declared them. But with the relatively positioned element, the absolute positioned element has a boundary with margin and top, bottom, left, and right properties.
The transform method increases flexibility and responsiveness if the width is undefined.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.