How can I center an absolutely positioned element in a div?

css css-position center absolute
Ish picture Ish · Nov 21, 2009 · Viewed 1.2M times · Source

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown.

I tried this. But it needs to be adjusted as the width is responsive.

.center {
  left: 50%;
  bottom: 5px;
}

How can I do it?

Answer

Matthias Weiler picture Matthias Weiler · Nov 25, 2011

This works for me:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Related questions

Center an item with position: relative

I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes …

Read More
How do I vertically center align a position:relative element?

How do I vertically center align the parent container to the canvas which has position:relative? The parent container has a child element with position:absolute. The child element has been positioned in the center of the parent container. Here's …

Read More
Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More