Vertically center div using CSS only without any JavaScript

Vertically center div using CSS only without any JavaScript

4 min. read

Vertically center div: Vertically centering a div or any element of any height can be done only using CSS without any JavaScript, for that the element that we are styling need to be fixed positioned, why fixed positioned? that is because a fixed positioned element is positioned relative to the viewport.

Absolute positioning can be used in place of fixed positioning but an absolute positioned element is positioned relative to the closest positioned parent element, if the closest positioned parent element is not covering the whole viewport then its's absolute positioned child element can not be made vertically centered in the viewport.

Note: If there is no positioned parent element of an absolute positioned child element then the child element will be positioned relative to the body element.

To know more about CSS positioning read the MDN Web Docs.

A fixed or absolute positioned element is removed from the normal document flow i.e. if an element is fixed or absolute positioned then it does not occupy any space along with normal elements which are not positioned using CSS.

HTML markup

<body>
    <div id="div_cover">
        <div id="my_div"></div>
    </div>
</body>

We will make the div#my_div element vertically centered.

1. Using absolute positioning: Two scenarios:

  1. If the closest parent element is not body element and it is positioned i.e. relatively positioned, absolute positioned etc.(CSS positioning) and is covering the whole viewport.
  2. If closest parent is body element then positioning of body element is "not" necessary but it must cover the whole viewport vertically.

Scenario 1: CSS rules

From our HTML markup the closest parent element is div#div_cover element not the body element then the CSS rules will be:

html, body
{
    height: 100%;
}

#div_cover
{
    position: relative; /* #div_cover element is parent of #my_div element, it is positioned and covers the whole viewport vertically as well as horizontally */
    height: 100%;
}

#my_div
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 400px;
    height: 200px; /* Can be any value > 0px */
    margin: 0 auto;
    transform: translateY(-50%);
}

Scenario 2: CSS rules

If the closest parent element is body element i.e. div#div_cover element is not there in our HTML markup then the CSS rules will be:

html, body
{
    height: 100%;
}

#my_div
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 400px;
    height: 200px; /* Can be any value > 0px */
    margin: 0 auto;
    transform: translateY(-50%);
}

2. Using fixed positioning

CSS rules

#my_div
{
    position: fixed;
    top: 50%;
    right: 0;
    left: 0;
    width: 400px;
    height: 200px; /* Can be any value > 0px */
    margin: 0 auto;
    transform: translateY(-50%);
}

Fixed positioned element is positioned relative to the viewport so there is no need to style the body element i.e. making it cover the whole viewport vertically using height: 100%; CSS rule.

Write comments