链接到同一页面上的元素并使其在窗口中居中答案

【问题标题】：Link to an element on the same page and have it centered in window链接到同一页面上的元素并使其在窗口中居中
【发布时间】：2014-04-20 08:37:45
【问题描述】：

我正在处理一个页面，它有点长，所以我选择使用以下方法链接到它的各个部分：

<a href="#myID">Link</a>

<div id="myID">Content that I would like in center of screen, rather than at the absolute top.</div>

一切正常，因为我非常精通这样的基本内容，但我想知道是否有办法让我链接到的内容离浏览器窗口的顶部更远一些，而不是立即在顶部。它不必完全居中，也许 100px 左右的边距就可以了。

谢谢

【问题讨论】：

当然，这是一种有效的方法。
不确定您是否理解我的问题...我知道我正确链接到该元素。我在问是否有办法将内容更多地移向屏幕中心，当它在单击链接后出现时。我不喜欢把它一直放在窗口的顶部。
我很确定 Diodeus 明白，并且正在回复您关于使用边距做您想做的事情的评论。
没有。我不想要元素本身的边距。该页面看起来很好。我正在链接到同一页面中的元素，并且在这样做时，我跳转到的元素被放置在屏幕的最顶部。我并不想移动与页面本身内的任何内容相关的元素。我想知道是否有一种方法可以使当您链接到同一页面上的项目时，它们不会直接放置在屏幕顶部，而是稍微滚动页面以使它们更靠近中心.

标签： html hyperlink href center centering

【解决方案1】：

<head>
<script>

function change()
{
document.getElementById("myID").style.marginTop="100px";
}
</script>
</head>
<body>
<a href="#myID" onclick="change()">Link</a>

<div id="myID">Content that I would like in center of screen, rather than at the absolute top.sss
<pre>
s
s
s
s
s
s</pre>
</div>
</body>

【讨论】：

谢谢！我认为对我拥有的每个 ID 都执行此操作会很麻烦，所以我将离开它。这不是让我太恼火的事情，所以我会保持原样。不过还是谢谢你的帮助

【解决方案2】：

您需要做的就是添加一点 CSS：

#myID {
   margin-top: 100px;
}

希望有帮助！

【讨论】：