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

【问题标题】：How to position a div in the middle of the screen when the page is bigger than the screen当页面大于屏幕时如何将div定位在屏幕中间
【发布时间】：2011-06-28 01:56:14
【问题描述】：

您好，我正在使用类似于以下内容的方法将 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 出现时它甚至不在屏幕上。您必须向下滚动才能查看它。

谁能告诉我如何让它出现在屏幕中间？

【问题讨论】：

我刚刚在测试页面上测试了那个确切的代码，它使 div 在页面上完美居中，即使在它尝试将其向下推之前大约有 100 个 <br /> .也许尝试检查你的代码的其余部分，看看你是否有一些东西要么覆盖 DIV 的值，要么影响你的 DIV 导致这些问题。

标签： css html window center

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只需添加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;
}

【讨论】：

你是救命稻草。即使元素应用了变换比例，简单的解决方案也能很好地工作。

【解决方案3】：

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

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

【讨论】：

这种方法比批准的答案要好得多
喜欢这个，但它在“旧”浏览器中有效吗？

【解决方案4】：

只需输入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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用变换；

<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");

【讨论】：

【解决方案7】：

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

这对我有用

【讨论】：

虽然这在技术上可能是正确的，但您需要简要说明为什么这可以解决上下文问题

【解决方案8】：

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

【讨论】：

面试时问我的问题“你如何对齐屏幕的div中心？”

【解决方案9】：

在你的脚本页面...

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

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

   <div class="a-middle">

【讨论】：

【解决方案10】：

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

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

<!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 将始终位于中心。

希望对您有所帮助:)

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

【讨论】：

添加一些解释

【解决方案13】：

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

使用位置：

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

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

使用弹性：

父标签样式应该是这样的：

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

【讨论】：

【解决方案14】：

试试这个。

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

【讨论】：

我认为这个更有用，因为你不需要对父元素应用任何样式。

【解决方案15】：

使用弹性

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

【讨论】：

这会将内容集中到父元素或页面，而不是屏幕。

【解决方案16】：

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

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

你的 div 正好在屏幕的中心

【讨论】：