How to REALLY center an HTML element (via CSS position absolute/fixed)

Nice. What about vertical alignment? Adding simliar top properties doesn't seem to work.

Yep, it doesn't work on vertical alignments since the percentages (both left:-50%; top:-50%) are relative to the width of the container. That's why god created flex-box (but there's also table-cell and js for the weak of heart)

Please don't make a wrapper where you don't need to. Use display: block and margin: 0 auto, or a negative margin of half the element width, or if you can use calc() use left: calc(50% - <your element width>/2), or if you can use flexbox use that, or display: table-cell...

@tome , its good for supporting all browsers. It's better to use Only one wrapper. But if you need to support IE old versions?
We still use extra elements, sometimes for design. I remember the days that we made 9 elements for rounded corners. We need to prefer the minimum elements we add to the page, but sometimes is the less worse option.....

display: block and margin: 0 auto works in old IE, and doesn't need an HTML wrapper

@tome . you can't use margin 0 auto with position fixed.....

If you're using absolute/fixed, then use negative margins:
For a 400px-wide element:

left: 50%;
margin-left: -200px;

@tome you need to know exactly width...., in my solution it's dynamic

That's preferable to unnecessary wrappers (most of the time)

@tome I will agree to disagree. I show example with images. One time the image 200px width and in the second time it will be 400px, what then?

Then use a modern solution like table-cell, flexbox, or calc(), and let IE7 and below use overflow: auto, or lock the container width and have its contents percentage-sized. http://caniuse.com/css-table

IE7 is six years old. We shouldn't be filling our modern markup with stuff to support it; it's holding the Web back.

@tome And what with IE8?
sometimes the decision aren't always of us.

My solution benefits<br>
1. My solution it's better then to calculate with JS the exactly position(for IE7 and IE8).<br>
2. It's dynamic for for unknown width size.<br>
3. Supports IE7 & IE8. (sometimes you mast support them).

And until you bring solution that resolve all this issues, this is still necessary solution.

And if you find something that does that, I would love to know It.

Thank you for sharing this ;) it was really useful for me :).

IE8 supports table-cell.

If you absolutely have to support IE7 - I mean have to - looking exactly the same as modern browsers, then at least use text-align: center in the parent. At least that way, if you want to add more elements side-by-side, you can: http://jsfiddle.net/7Esg9/1/

Edit: Updated the fiddle to demonsrate the modularity of it.

@fardjad ?comment=@fardjad (Sorry, Coderwall has a bug that replaces my "Edit/Delete" with your "Reply")

The point of removing the wrapper is less to do with cleanliness than the modularity and re-useability of the relevant CSS. The 'ugly' (and I agree it is uglier) CSS should be handled by a preprocessor anyway - centering an element horizontally in fixed/absolute positioning is something you'll need to do all the time, and that means editing the CSS will require a lot of comparatively awkward HTML editing, and quite of lot of HTML 'divitis'/bloat.

To be clear, <div> and <span> are intended to be unsemantic tags, so the semantic value of the markup isn't one of my concerns here.

It's also worth noting that the modern solutions I emphasised in my first comment as being strongly preferable to an IE7 workaround can look much nicer than the workaround, particularly in the case of calc.

This is a clever technique.

Yes, there are places where margin 0 auto; is the best choice, and there are places where negative margins are the best choice. But this is the best solution, or at least a very reasonable solution, for a specific class of problems where you have a fixed positioned element with a highly dynamic width which needs centered, and supported across all browsers.

Not using a wrapper when you don't need to is certainly a good principle to work by. But another good principle is: don't sacrifice cross-browser support to avoid using a wrapper.

It's simply not the case that everyone can develop using only the most modern browser techniques, and I don't think a healthy debate centers around the value of competing techniques which cannot be proven objectively better in all cases, nor do I think it's appropriate to look down your nose at people who disagree with those non-objectively provable claims.

I think this is a good technique, used in the right situation. So, thanks for the tip!

That helps.

A simple guide on CSS positioning

http://www.corelangs.com/css/box/positioning.html

CSS tutorial

Hi All,
A best simple way to do this
There is no need of wrapper class
for horizontal u can use
.popup{
position:fixed;
width:200px;
height:300px;
left:0;
right:0;
margin:auto;
}
best way

for vertically u need two more css above this in first use display table, in child use display:table-cell; vertical-align:middle;
then use your design div

use left:0; right:0; margin:auto;

Nice.

@georgemacin , the issue in this way, that you need to know the width to center, and it isn't always the case.

nice trick. lemme try it

It is a magic! Thank you!

OK, this it totally awesome - I've tried a whole bunch of stuff to center my fixed div and NOTHING else has worked across all browsers. Many thanks!

Small question: Why both pop-up and wrapper are defined with:
.popup .wrapper{
position:relative;
left:-50%;

and not just wrapper?

Works for me :)

.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
}

Best practice here i guess is more like
```.parent {
position: relative;
}

.child {
position: absolute;
left: 50%; // Relative to the parent element so it will be 50% of parent width + child width
top: 50%; // Relative to the parent element so it will be 50% of parent height + child height
transform: translate(-50%, -50%) // Relative to the child element so -50% of width and height
}
```

Then you have a perfect centered child in his parent.