javascript - Css 垂直对齐浏览器高度

Question

我有一张图片和一个 div，我想在浏览器上将它们垂直对齐，就像附件中的图片一样。两者都在浏览器的中间，而 div 在图像的中间最好的方法是使用 css 或 javascript

Answer 1

如果您知道要移动的框的宽度和高度，则可以使用以下命令:

div {
    position: absolute;
    width: 300px; /*your width*/
    height: 300px; /*your height*/
    top: 50%; /*offset top 50% of screen height*/
    left: 50%; /*same as top*/
    margin-left: -150px; /*subtract half of the width to 'center' horizontally*/
    margin-top: -150px /*same as left but for vertical centering*/
}

没有负边距的框的顶部边框将位于 50% 高度线上，这不是您想要的，这就是为什么您要从框中减去一半的高度和宽度，以消除这些差异。

当然这是一个随机的 300px 宽度的盒子，你需要在你要写的代码中自己看到宽度和高度。负边距始终是其原始宽度或高度的一半。