Html 将绝对 div 定位在屏幕视图的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4463308/
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
Position absolute div in center of screen view
提问by asker
I want to place div that has absolute position in center of the screen view (scrolled or not scrolled).
我想在屏幕视图的中心放置具有绝对位置的 div（滚动或不滚动）。
I have this but its places div in mid od the document and not mid of current view.
我有这个，但它的 div 位于文档的中间，而不是当前视图的中间。
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
margin-left:-70px;
margin-top:-50px;
}
回答by Kasturi
Change position:absoluteto position: fixedand you should be good to go!
更改position:absolute为position: fixed，您应该很高兴！
When you say position - absolute, the reference div is the parent div that has a position - relative. However if you say position -fixed, the reference is the browser's window. which is wat you want in your case.
当您说位置 - 绝对时，参考 div 是具有位置 - 相对的父 div。但是，如果您说位置固定，则参考是浏览器的窗口。这就是你想要的情况。
In the case of IE6 i guess you have to use CSS Expression
在 IE6 的情况下，我猜你必须使用 CSS 表达式
回答by mimic
Use the following CSS:
使用以下 CSS：
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
回答by Basic Coder
If you don't want to change your element's position to fixed, here is a solution with keeping your element absolut.
如果您不想将元素的位置更改为fixed，这里有一个保留元素的解决方案absolut。
Since CSS's calc()is supported by all browsers now, here a solution using calc().
由于calc()现在所有浏览器都支持CSS ，这里有一个使用calc().
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
}
回答by vanowm
A bit more complex way is to use multiple outer boxes. This method works well with or without hard coded width/height of the middle box (background colors added just to show what each box does):
更复杂的方法是使用多个外盒。此方法适用于或不使用中间框的硬编码宽度/高度（添加背景颜色只是为了显示每个框的作用）：
/* content of this box will be centered horizontally */
.boxH
{
background-color: rgba(0, 127, 255, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* content of this box will be centered vertically */
.boxV
{
background-color: rgba(255, 0, 0, 0.2);
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
/* content of this box will be centered horizontally and vertically */
.boxM
{
background-color: lightblue;
padding: 3em;
}<div>
some text in the background
</div>
<div class="boxH">
<div class="boxV">
<div class="boxM">
this div is in the middle
</div>
</div>
</div>https://jsfiddle.net/vanowm/7cj1775e/
https://jsfiddle.net/vanowm/7cj1775e/
If you want display div in the middle regardless of the scroll position, then change positionto fixed
如果您想在中间显示 div 而不管滚动位置，则更position改为fixed
回答by Kenneth Bregat
What about this trick:
这个技巧怎么样：
position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;
回答by Savage
I managed to place absolutely positioned text in the center with the following:
我设法将绝对定位的文本放置在中心，如下所示：
position: absolute;
text-align: center;
left: 1%;
right: 1%;
This is a variation of the answer from Kenneth Bregat. It maintains absolutepositioning rather than fixed, plus it solves text wrapping issues mentioned in some answers. Don't forget that the parent will need relativepositioning.
这是 Kenneth Bregat 的答案的变体。它保持absolute定位而不是fixed，此外它还解决了一些答案中提到的文本换行问题。不要忘记父级需要relative定位。
