html - 垂直定位元素

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%;
}