CSS vertical-align div | Example for all browsers

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.

<!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>

<!DOCTYPE html>

<html>

<head>

#div1 {

height: 500px;

padding: 5px;

border: 2px solid red;

display: flex;

align-items: center; /* align vertical */

}

</style>

</head>

<body>

<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.

<!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>

<!DOCTYPE html>

<html>

<head>

.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>

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>

</body>

</html>

Output:

vertically center a div for all browsers

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

Rohit

Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.

CSS vertical-align div | Example for all browsers