在屏幕视图的中心位置放置绝对div

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

5 个解决方案

#1

Change position:absolute to position: fixed and you should be good to go!

换位置:绝对位置:固定的，你应该很好去!

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.

当你说position - absolute时，reference div是具有position - relative的父div。但是，如果您说位置固定，则引用是浏览器的窗口。这是你想要的。

In the case of IE6 i guess you have to use CSS Expression

就IE6而言，我猜你必须使用CSS表达式

#2

Use the following CSS:

使用下面的CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#3

Since CSS's calc() is supported by all browsers now, here a solution using calc().

由于现在所有浏览器都支持CSS的calc()，所以这里有一个使用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)); 
}

#4

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/

If you want display div in the middle regardless of the scroll position, then change position to fixed

如果您希望显示div在中间，而不考虑滚动位置，则将位置更改为fixed

#5

-3

margin-left: -half_of_the_div;
left: 50%;
position: fixed;

example on codepen

例子codepen

#1