How To Align 3 Divs Vertically

If you are designing a website, aligning divs vertically is often necessary. Fortunately, it’s easy to do with just a little bit of HTML and CSS.

In this tutorial, we will show you how to align 3 divs vertically and make them look beautiful.

Steps:

1. Create your 3 divs in HTML. In this example, we will name them “div1”, “div2”, and “div3”.

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="div1">
        <p>Div 1 Content</p>
    </div>
    <div class="div2">
        <p>Div 2 Content</p>
    </div>
    <div class="div3">
        <p>Div 3 Content</p>
    </div>
</div>

2. Add CSS styles to each div class to make them vertically aligned. Use the “display” and “flex” properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.div1, .div2, .div3 {
  background-color: #e6e6e6;
  width: 80%;
  height: 100px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div2 {
  background-color: #d9d9d9;
}
.div3 {
  background-color: #bfbfbf;
}

3. Save the file and preview the page. The three divs should now be vertically aligned and centered within their container.

Conclusion:

In just a few simple steps, you can easily align three divs vertically on your website. With some basic HTML and CSS, you can create a more visually appealing and user-friendly design. Now that you have mastered this technique, you can apply it to other aspects of your website as well. Happy coding!

Full Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="container">
    <div class="div1">
        <p>Div 1 Content</p>
    </div>
    <div class="div2">
        <p>Div 2 Content</p>
    </div>
    <div class="div3">
        <p>Div 3 Content</p>
    </div>
</div>
 
<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.div1, .div2, .div3 {
  background-color: #e6e6e6;
  width: 80%;
  height: 100px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div2 {
  background-color: #d9d9d9;
}
.div3 {
  background-color: #bfbfbf;
}
</style>