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" >
  <meta charset="UTF-8">
  <title>Vertical Centering Overlay</title>
  <link rel="stylesheet" href="./style.css">

<div class="container">
  <div class="bg-layer">
    <img src="">
  <div class="fg-layer">
    <h1> Title </h1>
    <h2> Author </h2>
    <h2> Date </h2>

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

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

Edited on 2024/03/18