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％。编辑：它将与包含元素的宽度相关。

垂直定位元素

2 个答案: