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宽度框，您需要在您必须编写的代码中查看自己的宽度和高度。负边距始终是其原始宽度或高度的一半。

Answer 2

我能够使用来自的资源做到这一点 demosthenes.info/blog/723/Seven-Ways-of-Centering-With-CSS 由Parfait推荐