当前位置： 文江博客话题详情

当页面比屏幕大时如何将div定位在屏幕中间

发布于 2024-10-17 17:46:59 字数 595 浏览 3 评论 0原文

您好，我正在使用类似于以下内容的方法来将 div 放置在屏幕中间：

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

但是，这样做的问题是它将项目放置在页面中间而不是屏幕中间。因此，如果页面有几个屏幕高，并且我位于页面顶部（该部分的顶部显示在屏幕上），那么当我使 div 出现时，它甚至不在屏幕上。您必须向下滚动才能查看它。

有人可以告诉我如何让它出现在屏幕中间吗？

原文

Hi I'm using something similiar to the following to get a div positioned in the middle of the screen:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

However the problem with this is it positions the item in the middle of the page not the screen. So if the page is a few screen high and I'm at the top of the page (the top part of the part is displayed on the screen) when I make the div appear it's not even on the screen. You have to scroll down to view it.

Can someone please tell me how you'd make it appear in the middle of the screen?

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

扫码二维码加入Web技术交流群

发布评论

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

评论（16）

撩人痒 2024-10-24 17:46:59

只需添加 position:fixed ，即使向下滚动，它也会保持在视图中。请参见 http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
回复 原文
极度宠爱 2024-10-24 17:46:59

我认为这是一个简单的解决方案：

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

I think this is a simple solution:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

回复 原文
梦毁影碎の 2024-10-24 17:46:59

使用变换；

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

JavaScript 解决方案：

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

Use transform;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Javascript Solution :

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
回复 原文
不回头走下去 2024-10-24 17:46:59

试试这个。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Try this one.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
回复 原文
剩余の解释 2024-10-24 17:46:59

只需输入 margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}


<div id="mydiv">Test Div</div>

Just put margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}


<div id="mydiv">Test Div</div>
回复 原文
空城仅有旧梦在 2024-10-24 17:46:59
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

这对我有用

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

This worked for me

回复 原文
当梦初醒 2024-10-24 17:46:59

简短的回答，只需添加 position:fixed 即可解决您的问题

Short answer, Just add position:fixed and that will solve your problem

回复 原文
夏雨凉 2024-10-24 17:46:59

将标签定位在屏幕中间或其父标签的两种方法：

使用位置：

将父标签 position 设置为 relative（如果目标标签有父标签）然后设置目标标签样式，如下所示：

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 flex：

父标签样式应如下所示：

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

Two ways to position a tag in the middle of screen or its parent tag:

Using positions:

Set the parent tag position to relative (if the target tag has a parent tag) and then set the target tag style like this:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Using flex:

The parent tag style should looks like this:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
回复 原文
ゞ花落谁相伴 2024-10-24 17:46:59
<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
回复 原文
飘逸的'云 2024-10-24 17:46:59

好吧，下面是这个的工作示例。

如果您调整网页大小或以任何大小加载，这将处理中心位置。

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

在上面的示例中，加载 div 将始终位于中心。

希望这对您有帮助:)

Well, below is the working example for this.

This will handle the center position if you resize the webpage or load in anysize.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

In above sample loading div will always be in center.

Hoping this will help you :)

回复 原文
请你别敷衍 2024-10-24 17:46:59
#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

只需将上述三个属性设置为您的任何元素即可！

你的 div 正好位于屏幕的中心

#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

just set the above three properties any of your element and there you Go!

Your div is exactly at the center of the screen

回复 原文
冬天的雪花 2024-10-24 17:46:59

在你的脚本页面...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

在 Div 中使用 a-middle class...

   <div class="a-middle">

In ur script page...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Use a-middle class in the Div...

   <div class="a-middle">
回复 原文
岁月静好 2024-10-24 17:46:59
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

回复 原文
烟火散人牵绊 2024-10-24 17:46:59

使用 FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

USING FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;
回复 原文
時窥 2024-10-24 17:46:59
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
回复 原文
情未る 2024-10-24 17:46:59

为此，您必须检测屏幕尺寸。这对于 CSS 或 HTML 来说是不可能的；你需要 JavaScript。以下是 Mozilla 开发人员中心有关窗口属性的条目 https://developer.mozilla.org/en /DOM/window#Properties

相应地检测可用的高度和位置。

For this you would have to detect screen size. That is not possible with CSS or HTML; you need JavaScript. Here is the Mozilla Developer Center entry on window properties https://developer.mozilla.org/en/DOM/window#Properties

Detect the available height and position accordingly.

回复 原文
~没有更多了~

关于作者

孤星

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文