Question

不确定我在这里遇到了什么问题，但是我要说我有两个div，并且h1元素（或P1）看起来像这样：

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

我希望我的元素出现在内部div的“中间中间”，也就是它的直接父级。为实现这一目标，我给它一个保证金：50％＆amp;左边距离：50％，理解为这将使其正好朝向div的中间位置。虽然它确实把它带到中间，但它并没有完全把它带到中心。事实上，它似乎相对于外部div，即带有类包装器的那个位置。

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

http://jsfiddle.net/KLRsN/

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

Answer 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

Answer 2

如果要在中间显示文本内容，可以使用text-align：center，或者可以将宽度应用于h1标记并使用margin：auto。要将其垂直放置在中间，请使用相对位置和顶部：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
 }

希望有所帮助

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

2 个答案: