CSS vertical align div
Here is example code of How to vertically center <div> inside the parent element with CSS:-
The best approach in modern browsers is to use flexbox, for other or older browsers you’ll need to implement a fallback solution.
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 |
<!DOCTYPE html> <html> <head> <style type="text/css"> #div1 { height: 500px; padding: 5px; border: 2px solid red; display: flex; align-items: center; /* align vertical */ } </style> </head> <body> <div id="div1"> <div> Hello World!</div> </div> </body> </html> |
Output:

How to vertically center a div for all browsers?
Below is the best all-around solution to work vertically and horizontally center a fixed-width, flexible height content box. It was working for recent versions of Firefox, Opera, Chrome, and Safari.
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 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <style type="text/css"> .outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid red; } .middle { display: table-cell; vertical-align: middle; border: 1px solid green; } .inner { margin-left: auto; margin-right: auto; width: 400px; border: 1px solid blue; /*whatever width you want*/ } </style> </head> <body> <div class="outer"> <div class="middle"> <div class="inner"> <h1>The Content</h1> <p>Once upon a midnight dreary...</p> </div> </div> </div> </body> </html> |
Output:

Source: stackoverflow.com
Do comment if you have doubts and suggestions ono this tutorial.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version