Absolutely positioned element centered even when resizing the window - css

Question

There are tons of articles about centering an absolutely positionned element, but all of them are for fixed dimensions and a fixed window.
However, the dimensions of the position:absolute element I want to center are variable (mxn-width) according to the size of the browser. I want my element to remain horizontally centered regardless of the size of the window and even when the user changes the window size.
Is that possible to achieve without JS ?

Answer 1

From what I understand of your problem, this could be solved by
# divId {
margin-left: auto;
margin-right: auto;
max-width: 300px;
}

Answer 2

You could do this:
#myDiv {
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}
Take in account though that the percentages will need to be adjusted based on the size of your div. If you have an element that is 400px wide and you use left 50% it won't be exactly in the middle because it calculates 50% from the left border of your div, not the center of the div.

Answer 3

By using percentages, a block element can be made to center, regardless of the size of the element or the browser window. This is accomplished by setting the element's upper left corner to the center of the screen using left:50%; and top:50%;, then offsetting that backwards 25% with margin:-25%;.
Height and width must also be set to 50%. Setting top and left (and/or bottom and right) pulls the block out of the normal flow and treats it much like position:fixed and position:absolute does. Thus, it is on a different z-index layer and will overlay the elements that are in the normal flow.
This CSS class applied to a <div>, makes it half the size of the browser window, both horizontally and vertically, and centers it. Since the <div> will not be in the normal flow, this works well for creating pure-CSS popups...
.blockCenter {
display: block;
height: 50%;
left: 50%;
margin: -25%;
top: 50%;
width: 50%;
}
Instead of being 50% wide and 50% tall, this class would make the element 50% wide and 90% tall. Notice how the top margin must always be negative one-half the height to keep it centered...
.blockCenterTall {
display: block;
height: 90%;
left: 50%;
margin: -45% -25%;
top: 50%;
width: 50%;
}