中心一个div绝对?

时间:2011-03-03 18:39:53

标签: html css

我在另一个div内有一个div,其右边和左边有边框以使其居中:

http://jsfiddle.net/Dhvfm/

我想将内部div更改为absolute,以便外部div在其后面流动:

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

现在它没有居中。有没有办法解决这个问题?

2 个答案:

答案 0 :(得分:4)

这里有两个问题:

  1. 您绝对定位元素但不提供topbottomleftright,因此它会保留在原始位置。哪个会好的,除了......
  2. ...具有百分比维度(widthheight)的绝对定位元素是其上下文父外部维度的百分比(在这种情况下,<body>元素。)。
  3. 你可以通过setting left: 0; on it重新定位内部div,但它仍然会与身体的边界重叠。要解决这个问题,最简单的方法可能是放弃width属性而转而使用setting both left and right to the width of the body's borders。 (这对绝对定位的元素起到了一种“智能拉伸”的作用。)

答案 1 :(得分:0)

编辑:这是用于水平居中......

如果你知道你的内部div将是你的例子中的设定高度,你可以只计算边距。例如:http://jsfiddle.net/Me7HK/2/

如您所见,保证金为(outer height - inner height) / 2