center a div absolutely?_问答_开发者_运维开发者技术经验分享

center a div absolutely?

开发者 https://www.devze.com 2023-02-15 03:34 出处：网络

I have a div inside another div that has borders on the right and left to center it: http://jsfiddle.net/Dhvfm/

相关专题：css

I have a div inside another div that has borders on the right and left to center it:

http://jsfiddle.net/Dhvfm/

I want to change the inner div to开发者_StackOverflow中文版 absolute so that the outer div flows up behind it:

http://jsfiddle.net/Dhvfm/1/

Now it's not centered. Is there any way to fix that?

You have two problems here:

You're absolutely positioning an element but not providing top, bottom, left, or right, so it's being left in its original position. Which would be fine, except…
…abolutely-positioned elements with percentage dimensions (width, height) are a percentage of their context parent's outer dimensions (in this case, the <body> element).

You can re-center the inner div by setting left: 0; on it, but it will still overlap the body's borders. To fix that as well, the simplest method is probably to drop the width property in favor of setting both left and right to the width of the body's borders. (This acts as a kind of "smart stretching" for absolutely-positioned elements.)

Edit: This is for horizontal centering...

If you know that your inner div is going to be a set height as you have in your example, you can just calculate the margins. For your example: http://jsfiddle.net/Me7HK/2/

As you can see the margin is (outer height - inner height) / 2