One of the significant tasks to accomplish during the website development project is how to align centre a div horizontally or vertically with the help of CSS. I know this because I had spent hours when I was learning the CSS to accomplish this task. The alignment of an HTML element becomes more challenging if you don’t know what type of element you are aligning because it depends on whether the element is inline or block level. Do not worry. We will discuss four different ways to align center a div in CSS.
Table of Contents
Benefits Of Alignment
- Without alignment, you can’t move the element from one place to another.
- It will make your website design more attractive.
- Alignment will help you to get your elements in equal space from left and right.
Now you know the benefits of alignment with the help of CSS, let us try to achieve the centre alignment of HTML elements such as div horizontally and vertically with CSS. There are two types of HTML elements, block-level and inline-level elements, and we have written the code according to these two types of elements. In this article, we will discuss the alignment of block-level elements.
Center Alignment for block-level Elements
Block-level elements always start from a new line and take as much as width they can. We will try to align the div(block-level) element with the help of the following steps. Let’s assume that our HTML and CSS code will be like this:-
<div class="container"> <div class="box"> </div>* { margin: 0px; padding: 0px ;
box-sizing: border-box ;
}
body {
height: 100vh;
}
.container {
width: 100%;
height: 100%;
border: 5px solid green;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
border: 2px solid black;
}
You can see in the below image that after writing the above code in the codepen, we have the following result. Our div with the class name .box is on the left of the first line because it is a block-level element. On the other hand, we have a container with the class name .container that has a green border. We will solve the problem with the help of the following methods
Method-1. Align centre a Div with the help of flexbox
When I started learning CSS, I remember I was not aware of the flexbox property, and I tried to use float to move the elements. As a result of using the float property, the container gets collapsed, and it also changes the position of all other elements in that container. In comparison, the flexbox made it easy to align center a div element to the center without any drawbacks. If you want to use the flexbox, use the display property with the value of flex to the parent container of the moving element. I am giving this property to my container separately, but you can assign it to the container you have already declared in a CSS style. Otherwise, it will repeat the code.
Note: Parent Container or element should have width and height of 100%;
.container {
display: flex;
}
After this, we will assign the justify-content property with the value of center to the container, this will move the child element horizontally centre.
.container {
justify-content: center;
}
You can see in the image that the element has moved centre horizontally.
Now we will assign the align-items property with the value of center to the parent element or container to make the div vertically centre.
.container {
align-items: center;
}
You can see in the image that the element has moved vertically centre.
Method-2. Align Center A div Using Absolute positioning
Another way to align center a div in CSS is to use the position property with the value of absolute to the child element. In the next step, you have to assign position:relative to the parent container so that the child element will stay relative to the the parent container.
.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
}
The above code will move our block-level div to 50% from the top(from the parent container).
Now we have to move the div from the left to bring it to the centre of the container div. You have to assign the right:50% to the div to accomplish that task.
.box {
right: 50%;
}
You can see the result in the below image, Our div has moved 50% from the left.
Have you noticed that it is still not in the centre of the parent container because the left and right (50%) properties will move only the top and left margin of the child div to the middle of the parent div instead of the whole element. Moreover, the percentage values of left and right properties are relative to the width and height of the parent container. So to bring the div to the parent’s exact centre, we have to use the transform:translate(-50%, -50%), which will move it in X and Y coordinates.
.box {
transform: translate(-50%,-50%);
}
Finally, we have done that. The result of the above code will be the same as in the below image.
Method 3- Center with the help of absolute position and Margin
There is also another way where we can use margins along with the absolute positioning. First of all, we will make it horizontally center with the left and right properties and give them a value of 0. Secondly, we will use margin property with the value of the auto.
Note: Do not forget to assign position:relative to parent container
.box {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
As you can see in the below image, The above code will bring the div horizontally center.
Now our next task is to get our div vertically center as well, and for that, we have to apply to more properties which are top and bottom with the value of 0.
.box {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
}
Now you will see the div will be in the center of the parent container.
Method 4 – Assign Margins according to the height of the div
In this method, we will use margin-top and margin-left properties with half of the value of the height and width of the element. This method works in the same way we have used the transform property to move the element to the center. You can see in the below code that we have used the position:absolute along with the top and left property.
Note: Do not forget to assign position:relative to parent container
.box {
position: absolute;
left: 50%;
right: 50%;
}
The above code will bring us the same result in method-2 while using the position absolute.
Now we have to assign the margin-top:75px and margin-left:75px because we have already given out div(.box) width and height of 150px. This will bring us the desired result.
.box {
margin-top: 75px;
margin-left: 75px;
}
You will see the below result after using the code
Wrapping Up
We have seen four different ways to align center, horizontally and vertically a block-level element, and you can use any of these methods. I think these methods will help you to write down better CSS. For your reference, I am providing you the codepen of all this code we have written in the above examples. Happy coding!
See the Pen Css Center alignment by Jaspal (@jaspal9755) on CodePen.
