javascript - 垂直和水平居中 HTML5 Javascript

Question

所以我有这个并且想将它垂直和水平居中:

<div id="hd_hype_container" style="position:relative;overflow:hidden;width:600px;height:405px;">
    <script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>

我已经尝试了所有解决方案，但似乎没有一个适合我。我需要在 js 中添加一些东西吗？

如果有任何帮助，我将不胜感激。

谢谢。

Answer 1

尝试:

#hd_type_container {
    position: absolute;
    top: 50%;
    height: 50%;
    width: whatever;
    height: whatever; 
    margin-left: -whatever_width_is / 2;
    margin-top: -whatever_height_is / 2;
}

请记住，绝对或相对定位的元素是相对于同样是绝对或相对定位的“最近”父容器定位的。

换句话说，如果您的 div 是其他绝对定位的 div 的子级，您将不会以屏幕为中心，而是以父级为中心分区。

更新:假设您正在尝试制作某种弹出框，您可能还需要一个 overflow: hidden 指令。