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

嗨，我正在使用类似于下面的东西来获得屏幕中间的 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 出现时，它甚至不在屏幕上。你必须向下滚动才能看到它。

谁能告诉我怎么让它出现在屏幕中间？

595384 次浏览
小开

为此，您必须检测屏幕大小。这对于 CSS 或 HTML 是不可能的; 您需要 JavaScript。下面是 MozillaDeveloperCenter 关于窗口属性 https://developer.mozilla.org/en/DOM/window#Properties的条目

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

小开
最佳答案

只要添加 position:fixed，即使你向下滚动，它也会保持在视图中

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

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

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

小开

就写 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>
小开

简短的回答，只要添加 position:fixed，这将解决您的问题

小开

使用变换;

<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");
小开 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

这招对我很管用

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

在你的剧本里。

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

使用中产阶级在 Div..。

   <div class="a-middle">
小开

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

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

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

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

将标记放置在屏幕中间或其父标记的两种方法:

使用位置:

将父标记 position设置为 relative(如果目标标记有父标记) ，然后像下面这样设置目标标记样式:

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

使用 flex:

父标记样式应该如下:

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

试试这个。

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

使用 FLEX 

display: flex;
height: 100%;
align-items: center;
justify-content: center;
小开 
#div {
top: 50%;
left: 50%;
position:fixed;
}

只要设置以上三个属性的任何一个元素，就可以了！

你的 div 正好在屏幕的中央


提交答案