CSS position: absolute to Horizontally Center Elements

Centering the HTML element in the webpage is the most common task. You can use position: absolute to center the element horizontally. When you apply this property to the element, it will be removed from the normal document flow, and you can even position the element accurately using top, right, bottom, and left properties. Thereby, you get control over where the element is actually placed (inside the parent container). You can make your webpage dynamically responsive compared to others.

What is position: absolute in CSS?

The position: absolute property is used for positioning the elements with respect to the nearest ancestor. It works by taking the element out of the normal document flow and positioning them with respect to the values such as top, right, bottom, or left properties.

How Does position: absolute Horizontally Center an Element?

The position: absolute property can be used for horizontally centering an element. It can be done by placing the element in the nearest parent container. If there is no parent container, it is placed relative to the initial block. You can set the left: 0 and right: 0 to adjust the width, and you can use margin-left: auto and margin-right: auto to center the element horizontally.

Example 1: Centering the Div Using position: absolute

To center the div elements using absolute positioning. You can also use left: 50% and transform: translateX(-50%) for positioning the centered element. Add CSS properties like background color and padding to the targeted div.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Example</title>
  <style>
    .container {
      position: relative;
      height: 100ch;
      background-color: white;
    }

    .centered {
      position: absolute;
      left: 50%; 
      transform: translateX(-50%);
      background-color: lightblue;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">
      Centered element using absolute positioning.
    </div>
  </div>
</body>
</html>

Output:

Centering the Div Using position: absolute

Explanation: The container has a height of 100% of the viewport, and its position is relative to the child elements. The centered element is positioned absolutely inside the container, moved to center by left: 50% and transform: translateX(-50%);

Online Web Development Courses That Get You Job-Ready

Top Web Development Courses

Explore Program

Example 2: Centering the Button Using position: absolute

To create a button that is horizontally centered inside the container, use position: absolute. You can also use left: 50% and transform: translateX(-50%) for positioning the centered element. And followed by adding CSS properties.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Button</title>
  <style>
    .container {
      position: relative;
      height: 100vh;
      background-color: #f4f4f4;
    }
    .centered-button {
      position: absolute;
      left: 50%; 
      transform: translateX(-50%);
      background-color: #007bff;
      color: white;
      padding: 15px 30px;
      font-size: 18px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .centered-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="centered-button">Click Me</button>
  </div>
</body>
</html>

Output:

Centering the Button Using position: absolute

Explanation: You can create the button centered horizontally with this code. You can use CSS properties such as background color, text color, padding, etc., to style the button. You can hover over the button to make the color dark blue.

Conclusion

You can use position: absolute for centering the element horizontally. In this code, you can use left: 50% and transform: translateX(-50%) to center the element horizontally. The div and button are the HTML elements that can be centered using the above example. Therefore, you can improve the appearance of the webpage, and it becomes more responsive and user-friendly.