Javascript Css与浏览器高度垂直对齐

我有一个图像和一个div，我想在浏览器上垂直对齐它们，就像附加的图像一样。在浏览器的中间和图像中间的div中 最好的方法是使用css或javascript实现这一点

---

如果您知道要移动的盒子的宽度和高度，可以使用以下方法：

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%的高度线上，这不是您想要的，这就是为什么要从框中减去一半高度和宽度，以消除这些差异

---

当然，这是一个300像素宽的随机框，您需要在必须编写的代码中看到自己的宽度和高度。负边距始终是其原始各自宽度或高度的一半。

我可以使用

---

Parfait的推荐在很大程度上取决于周围的父节点，以及它们是否处于相对位置或绝对位置。在大多数情况下，div中的div可以通过margin auto居中，前提是它定义了高度和宽度。对于这些类型的问题，最好提供一个带有类似JSFIDLE的html+css示例。