When it comes to designing a webpage, one of the most common problems we face is how to center or align different elements. In this article, we will explore three different methods that could help you center an element using CSS.
As we've explained in the HTML & CSS chapter, we usually utilize the block-level elements such as <div> to create webpage layouts. However, the problem with <div> is that the block is always anchored to the top left corner by default.
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7
8 <style>
9 * {
10 box-sizing: border-box;
11 padding: 0px;
12 margin: 0px;
13 }
14
15 div {
16 border: 2px solid;
17 }
18
19 .big {
20 width: 500px;
21 height: 500px;
22 }
23
24 .small {
25 border-color: red;
26 width: 300px;
27 height: 300px;
28 }
29 </style>
30 </head>
31
32 <body>
33 <div class="big">
34 <div class="small"></div>
35 </div>
36 </body>
37</html>
Use auto margin to center blocks horizontally
There are many ways you could move the inner block. Let's start with the horizontal direction. The easiest way to center the <div> block horizontally is by setting its margin to auto.
1.small {
2 border-color: red;
3 width: 300px;
4 height: 300px;
5
6 margin: auto;
7}
Use flexbox to center blocks horizontally
Alternatively, you could utilize the flexbox or grid layout by setting the display property of the outer box to flex, or grid.
This allows you to easily configure the position and alignment of its child elements. For instance, you can center the inner block by setting justify-content to center.
1.big {
2 width: 500px;
3 height: 500px;
4
5 display: flex;
6 justify-content: center;
7}Although this method seems to be more complex, it does have its benefits, especially when you have a more complex layout. For example, you can center two or more blocks with the same CSS property.
Use padding to center blocks vertically
As for centering the block vertically, unfortunately, there is no easy way to do it. You could set a top padding for the outer block, but this method requires you to micromanage each element, and you need to know the exact size of the blocks.
1.big {
2 width: 500px;
3 height: 500px;
4
5 padding: 150px;
6}
7
8.small {
9 border-color: red;
10 width: 200px;
11 height: 200px;
12 margin: auto;
13}In this example, the outer block is 500px high, the inner block is 200px high, which means the center of the inner block aligns with the 100px point. If we push the inner block down by 150px, its center should align with the center of the outer block, which is at the 250px point.
Use position and transform to center blocks
Even though we successfully centered this block, but as you can imagine, it is not an effective method in practice. What if we don't know the exact size of the blocks, or if the size of the block is adjustable?
In this case, you could use position and transform like this:
1.big {
2 width: 500px;
3 height: 500px;
4
5 position: relative;
6}
7
8.small {
9 border-color: red;
10 width: 200px;
11 height: 200px;
12 margin: auto;
13
14 resize: both;
15 overflow: auto;
16
17 position: absolute;
18 top: 50%;
19 left: 50%;
20 transform: translate(-50%, -50%);
21}In this case, resize: both; makes sure the inner block is adjustable. The absolute position, along with top: 50%; and left: 50%; will place the top left corner of the inner box to the center point of the outer box.
And then translate(-50%, -50%) shifts the inner block's position back by 50% of its own width and height, aligning its center point with the outer block's center point.
This technique ensures that the inner box will always be centered inside the outer box, even if its size changes in the future.
Use flexbox to center blocks vertically
Lastly, just like the horizontal direction, you can center the inner block vertically using the flexbox layout, along with the align-content property.
1.big {
2 width: 500px;
3 height: 250px;
4
5 display: flex;
6 align-items: center;
7}
Of course, you can combine the techniques we discussed above to center the blocks both horizontally and vertically using the flexbox layout. For example:
1.big {
2 width: 500px;
3 height: 250px;
4
5 display: flex;
6 justify-content: center;
7 align-items: center;
8}
Conclusion
In this article, we went over three different methods to center an element within another element, including using margin and padding, position and transform, as well as the flexbox or grid layout.
These methods all have their own unique advantages and disadvantages. The auto margin method is the easiest to set up, but it can become impractical when you have multiple elements to center, and you'll have to micromanage each of them.
Using the flexbox or grid layout, you will be able to center all of its child elements with one CSS property, but this method is more complicated. There are six different alignment properties available, each of them serves a different purpose.
Lastly, the position and transform method is most suitable for elements that have varying sizes. However, it requires you to have a deeper understanding of these properties. If you're interested in learning more about them, you can also refer to the previously linked article.
Hope this article has been helpful to you! Happy coding!