垂直和水平居中 HTML5 Javascript

发布于 2024-12-01 11:36:28 字数 341 浏览 1 评论 0原文

所以我有这个并想将其垂直和水平居中：

<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中添加一些东西吗？

我将不胜感激任何帮助。

谢谢。

原文

So I have this and want to center it vertically and horizontally:

<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>

I have tried every solution and none seem to work for me. Do I need to add something into the js?

I'd appreciate any help.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧夏天 2024-12-08 11:36:28

尝试：

#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 的子级，您将不会以屏幕为中心，而是以父级 为中心div。

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

Try:

#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;
}

Remember though that absolute or relatively positioned elements are positioned relative to the "closest" parent container that's also absolute or relatively positioned.

In other words, if your div is a child of some other div that's absolutely positioned, you won't be centering to the screen, but centering to the parent div.

Update: Assuming you are trying to make a popup box of some kind, you might also want an overflow: hidden directive too.

回复收藏 0 原文

想你只要分分秒秒 2024-12-08 11:36:28

<div id="hd_hype_container" style="margin-top:50%;margin:0 auto;width:600px;height:405px;">
    <script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>

<div id="hd_hype_container" style="margin-top:50%;margin:0 auto;width:600px;height:405px;">
    <script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>

回复收藏 0 原文

~没有更多了~