How to Center an Absolutely Positioned Element in a Div

In CSS, centering an absolutely positioned element can cause some difficulties. It can be especially complicated if the width of the element is unknown.

Below, we’ll discuss two cases: when the width is unknown, and when it is known.

First, we will center an absolutely positioned element with unknown dimensions.

Create HTML

Create two <div> elements and add content to the inner box.
Use a <br> tag to add a line break.

How to Center an Absolutely Positioned Element in a Div

<body>
  <div class="outer">
    <div class="inner">
      A centered text.
      <br />The length of the text, height or width does not matter.
    </div>
  </div>
</body>

Add CSS

Set the position to "relative" for the "outer" class and "absolute" for the "inner" one.

How to Center an Absolutely Positioned Element in a Div

.outer {
  position: relative;
  margin: 5%;
  width: 80%;
  height: 500px;
  border: 2px solid #1703fc;
}

.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  text-align: center;
  border: 2px solid #468a4d;
}

Here is the full code.

Example of centering an absolutely positioned element with unknown dimensions:

How to Center an Absolutely Positioned Element in a Div

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outer {
        position: relative;
        margin: 5%;
        width: 80%;
        height: 500px;
        border: 2px solid #1703fc;
      }
      .inner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 50%;
        text-align: center;
        border: 2px solid #468a4d;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">A centered text.
        <br />The length of the text, height or width does not matter.</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> XFI4 <div class="inner"> A centered text.
The length of the text, height or width does not matter. </div> </div> </div> In the example above, the left property is relative to the parent element, while the transform is relative to the element’s own width and height. Thus, you can have a centered element with a flexible width on both the child and parent elements.

Next, we’ll show an example of centering an absolutely positioned element with exact dimensions. Here, the inner box will remain centered regardless of the outer element’s width. Note that this method requires knowing the exact width of the inner element to calculate the negative margin correctly.

Example of centering an absolutely positioned element with fixed dimensions:

How to Center an Absolutely Positioned Element in a Div

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outer {
        position: relative;
        width: 40%;
        height: 120px;
        margin: 20px auto;
        border: 2px solid #468a4d;
      }
      .inner {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 10px;
        left: 50%;
        margin-left: -50px;
        background-color: #1703fc;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Try it Yourself »