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

时间:2010-12-16 16:56:50

标签: html css

我想将具有绝对位置的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;   
}

8 个答案:

答案 0 :(得分:48)

position:absolute更改为position: fixed,你应该好好去!

当你说position - absolute时,引用div是具有位置相对的父div。但是,如果你说position -fixed,那么引用就是浏览器的窗口。这是你想要的wat。

在IE6的情况下,我猜你必须使用CSS Expression

答案 1 :(得分:37)

使用以下CSS:

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

答案 2 :(得分:19)

如果您不想将元​​素的位置更改为fixed,则此处是保留元素absolut的解决方案。

由于现在所有浏览器都支持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)); 
}

答案 3 :(得分:4)

更复杂的方法是使用多个外框。无论是否使用中间框的硬编码宽度/高度,此方法都可以正常工作(添加背景颜色只是为了显示每个框的内容):



/* 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>
&#13;
&#13;
&#13;

https://jsfiddle.net/vanowm/7cj1775e/

如果您想在中间显示div而不管滚动位置如何,请将position更改为fixed

答案 4 :(得分:0)

这个技巧如何?

position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;

答案 5 :(得分:0)

我设法通过以下内容将绝对定位的文本放置在中间:

position: absolute;
text-align: center;
left: 1%;
right: 1%;

这是肯尼斯·布雷加特(Kenneth Bregat)回答的一种变体。它保持absolute的位置而不是fixed的位置,并且解决了某些答案中提到的文本换行问题。别忘了父母将需要relative定位。

答案 6 :(得分:0)

这是使用 marginposition: fixed 的解决方案:

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

它通过增加所有边的 div 以适合整个屏幕来使 margin 居中。

编辑:我发现 top,right,bottom,left 有一个简写形式,即 inset。它已在主流浏览器中实现,您可以看到在其他浏览器上的兼容性here

所以要在屏幕上绝对居中一个 div:

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    inset: 0;
}

答案 7 :(得分:-3)

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

example on codepen