Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 383
Ish Avatar asked Nov 21 '09 21:11

Ish


People also ask

How do I center an absolute positioned div?

To center an element both vertically and horizontally: position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; But if you would like to understand how I came to these solutions, read further for more explanation.


1 Answers

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>
like image 193
Matthias Weiler Avatar answered Oct 04 '22 13:10

Matthias Weiler