Vertically Centering an Overlay Div |

To vertically centering a div that overlays over another div, a simple solution is to set style of the top layer to top: 0; left:0; bottom:0; right:0;. However, it doesn’t seem work well if the background layer is scrollable. Here is another solution for vertically centering an overlay div is to use top: calc(50%-0.5*div.height), where the div.height is the height of the foreground div which can be calculated dynamically using javascript. The following is the complete example.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Vertical Centering Overlay</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="container">
  <div class="bg-layer">
    <img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/flowers-324175_1280.jpg">
  </div>
  <div class="fg-layer">
    <h1> Title </h1>
    <h2> Author </h2>
    <h2> Date </h2>
  </div>
</div>

<script  src="./script.js"></script>

</body>
</html>

.container {
  /* placing the container on the middle layer */
  position: relative;
  z-index: 2;
}

.bg-layer {
  /* placing the div on background layer */
  position: relative;
  z-index: 1;
}

.fg-layer {
  /* placing the div on foreground layer */
  position: absolute;
  z-index: 3;
  /* the following centers the div vertically */
  top: calc(50% + var(--div-height));
  /* the following centers the div horizontally */
  left: 0;
  right: 0;
  text-align: center;
}

var fg = document.querySelector(".fg-layer");

var height = -0.5*fg.offsetHeight + "px";
   document.documentElement.style.setProperty("--div-height", height);

For more information getting height of div, you may read the post How to get height of a div element with JavaScript/jQuery.

You can check out the effect of the above example in CodePen Overlay.

Vertically Centering an Overlay Div

Fei Ye

2021/01/22