DEV Community

Cover image for Understanding how centering of HTML div element works with some help from AI
Vincent Kipyegon
Vincent Kipyegon

Posted on

Understanding how centering of HTML div element works with some help from AI

In the world of CSS, centering an HTML div element seems like a simple task but how to precisely centre a div element in the middle of a web page has drawn an unending debate. Like myself, most developers have memorised every technique for centering a div just in case it comes up during an interview. In any case, where is centred division applicable? How does it operate?

Image description

The picture above shows how Twitter/X uses a centered div when your lose your internet connection on its web application. Here is the CSS declaration for centering a div:

 #centerDiv {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
Enter fullscreen mode Exit fullscreen mode

The CSS declaration above is straight-forward, we set position of the div to absolute so as to remove from normal document flow, we set top and left properties to 50% so that div is centered on the middle of the page. The last declaration transform:translate(-50%,-50%) is the critical in centering the div.

Lets dive deeper

grid lines

Here is a a web page with two grid lines elements, intersecting at the center of the document. The point of intersection is where the div should be centered.

centered to grid

This how it looks without the last transform declaration: transform:translate(-50%,-50%);

I asked Google Bard AI to explain what transform:translate(-50%,-50%) does exactly and here is the explanation I got:

centered perfectly
In conclusio, centering a div means positioning it perfectly to the middle of the web page and then ensuring the center of the div itself is aligned to the center of the web page i.e the intersection lines.

Here is the final code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Div</title>
    <style>
      body {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        border: 1px solid green;
      }
      #centerDiv {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* we use flex box to center elements inside the div*/
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .vertical-line {
        height: 1px;
        border: none;
        transform: rotate(90deg);
      }
      .horizontal-line {
        position: absolute;
        top: 50%;
        height: 1px;
        width: 100%;
        border-collapse: collapse;
        border: none;
      }
    </style>
  </head>
  <body>
    <hr class="vertical-line" style="background-color: green; z-index: 100" />
    <hr class="horizontal-line" style="background-color: green; z-index: 100" />

    <div id="centerDiv">
      <span
        style="
          color: white;
          text-align: center;
          font-size: 1.5rem;
          font-weight: bold;
        "
      >
        I am centered div</span
      >
    </div>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)