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.


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

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

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


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: