垂直定位元素

Question

这更多地是与垂直定位元素有关的通用问题。当它是页面上的几个元素之一时。

html：

 <div id="outer">
   <div id="inner">
     <h1>text</h1>
   </div>
 </div>

我需要做的就是拿起h1并将其移动，以使其大约在页面下方的60％。护理水平定位。我只是对每个人的垂直定位所采取的措施感到好奇。使用margin-top或padding-top似乎是一个简单的答案，我想知道如果这是我采用的方法，我会遇到什么样的问题。

CSS：

 html,body {height:100%;width:100%}
 #outer {
  height:100%;
  width:100%;
 }
 #inner {
  margin-top/padding-top: (value); 
  }

非常感谢。

Answer 1

您可以使用

#inner {
    position: relative;
    top: 60%;
}

Answer 2

基本上，如果没有必要，我会远离定位元素，因为它有时会导致内容重叠的内容和其他问题。边距是元素周围的像素数量，即边界外（背景不扩展到边距），而填充是边界和元素内容之间的像素数。因此，如果您没有指定任何边框或背景，则保证金和填充也是如此。请注意，您可能希望设置百分比值以在不同的屏幕上获得相同的结果，例如60％。编辑：它将与包含元素的宽度有关。