将嵌套元素 w.r.t 定位到它的直接父级答案

【问题标题】：Positioning a nested element w.r.t to it's immediate parent将嵌套元素 w.r.t 定位到它的直接父级
【发布时间】：2013-01-08 08:34:59
【问题描述】：

不确定我在这里做错了什么，但假设我有两个 div 和一个 h1 元素（或 P1），看起来像这样：

<div class="wrapper">
 <div class="top">
    <h1>Content header</h1>
 </div>
</div>

我希望我的元素出现在内部 div 的“中心中间”，即它的直接父级。为了实现这一点，我给它一个 margin-top:50% 和一个 margin-left:50% 的理解，这将使它完全朝向 div 的中心中间。但是，虽然它确实把它带到了中间，但它并没有完全把它带到中心。事实上，它似乎相对于外部 div 定位自身，即带有类包装器的那个。

我在这里使用 jsfiddle 重新创建了这个：

http://jsfiddle.net/KLRsN/

是我指定选择器错误还是我的定位本身不正确？

【问题讨论】：

您需要 h1 成为 .top div 的“中心”？或 .top div 到 .wrapper div 的“居中”？？

标签： html css positioning

【解决方案1】：

-上面的答案并不完全正确，因为文本仍然不会完全垂直居中。

.wrapper{
  margin:5px;
  max-height:250px;
  min-height:250px;/*not required only height:250px will do*/
  border:1px solid green;
}

.content
{
  margin:5px;
  border:1px solid black;
  height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
  width:100px;
  position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
  text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
 position:absolute;
top:50%;
  left:50%;
  line-height:50px;
  width:50px;
    margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
  margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}

解释：

-html 中的元素是矩形框的形式，因此应用margin-top:50% 是将该框的顶部与父元素的 50% 对齐，而不是框内的文本。 - 这就是文本与中心不完全对齐的原因。

- 还必须为父元素（您希望将 h1 居中的元素）提供宽度和高度。

正确的方法是使用绝对定位和相对定位。

-给.container一个相对位置值，给h1一个绝对值

-通过给 h1 一个宽度和高度，我们然后应用一个负左边距等于宽度的一半和一个负上边距等于高度的一半，以便文本完全居中。

还有更多关于定位的信息-查看以下link

【讨论】：

感谢您按照我在 js fiddle 中指定的 CSS 工作，因此我投了赞成票/给了你正确的答案。但是有一个小问题，内部 div (.content) 必须是 position:absolute，因为它对于特定的动画是这样的。在这种情况下我们该怎么办？
如果一个元素（在本例中为 .h1）具有“位置：绝对”，则包含块由最近的祖先（在本例中为 .content）建立，其“位置”为“绝对” '、'相对的'或'固定的'。所以你可以给 .content div 一个绝对的位置。 w3.org/TR/CSS2/visudet.html#containing-block-details

【解决方案2】：

如果你想在中间显示文本内容，你可以使用 text-align:center ，或者你可以将宽度应用于你的 h1 标签并使用 margin:auto。要将其垂直居中放置，请使用相对位置和 top:50% 。试试这个css

.wrapper{
   height:250px;
   min-height:250px;
   border:1px solid green;
  }

 .content{
  position:relative;
  top:50%;
   border:1px solid black;
 }
 .content h1{
   border:1px solid blue;
   margin:auto;
   width:100px;
   background:red
 }

希望对你有帮助

【讨论】：