Html 当页面大于屏幕时如何将div定位在屏幕中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5012111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a div in the middle of the screen when the page is bigger than the screen
提问by Coder 2
Hi I'm using something similiar to the following to get a div positioned in the middle of the screen:
嗨，我正在使用类似于以下内容的方法将 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>
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.
然而，问题在于它将项目定位在页面的中间而不是屏幕。因此，如果页面有几个屏幕高并且我在页面顶部（部分的顶部显示在屏幕上），当我使 div 出现时，它甚至不在屏幕上。您必须向下滚动才能查看。
Can someone please tell me how you'd make it appear in the middle of the screen?
有人能告诉我你是如何让它出现在屏幕中间的吗？
回答by Hussein
just add position:fixedand it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
只需添加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;
}
回答by user2684935
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>回答by Erdogan
Use transform;
使用变换；
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Javascript Solution :
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");
回答by Erdogan
Just put margin:auto;
就放 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>
回答by Chandan Sharma
Try this one.
试试这个。
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
回答by Abraham
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
This worked for me
这对我有用
回答by Parth
Short answer, Just add position:fixedand that will solve your problem
简短的回答，只需添加即可position:fixed解决您的问题
回答by Maitrey Malve
<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>
回答by Alex Jolig
Two ways to position a tag in the middle of screen or its parent tag:
将标签放置在屏幕中间或其父标签的两种方法：
Using positions:
使用职位：
Set the parent tag positionto relative(if the target tag has a parent tag) and then set the target tag style like this:
将父标签设置position为relative（如果目标标签有父标签），然后像这样设置目标标签样式：
#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;
}
回答by Vikash Pandey
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 divwill always be in center.
在上面的示例加载 div将始终位于中心。
Hoping this will help you :)
希望这会帮助你:)
