html-将绝对div定位在屏幕vi的中心

我想将具有绝对位置的div放置在屏幕视图的中心(滚动或不滚动)。

我有这个,但是它把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;   
}
asker asked 2020-06-26T20:05:09Z
7个解决方案
48 votes

position:absolute更改为position: fixed,您应该一切顺利!

当您说位置-绝对时,参考div是具有位置-相对的父div。 但是,如果您说的是位置固定的,则引用是浏览器的窗口。 您要根据自己的情况选择哪种水。

对于IE6,我猜您必须使用CSS表达式

Kasturi answered 2020-06-26T20:05:33Z
39 votes

使用以下CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
mimic answered 2020-06-26T20:05:53Z
20 votes

如果您不想将元素的位置更改为calc(),则可以使用保留元素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)); 
}
Basic Coder answered 2020-06-26T20:06:17Z
4 votes

更复杂的方法是使用多个外部框。 无论有没有中间框的硬编码宽度/高度,此方法都能很好地工作(添加背景色只是为了显示每个框的功能):

position
position

[HTTPS://JS fiddle.net/van o我们/7春节1775哦/]

如果要在滚动条的中间位置显示div,请将position更改为fixed

vanowm answered 2020-06-26T20:07:51Z
0 votes

那这个技巧呢:

position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;
Kenneth Bregat answered 2020-06-26T20:08:11Z
0 votes

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

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

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

Savage answered 2020-06-26T20:08:35Z
-3 votes
margin-left: -half_of_the_div;
left: 50%;
position: fixed;

Codepen上的示例

pietervdd answered 2020-06-26T20:08:55Z
translate from https://stackoverflow.com:/questions/4463308/position-absolute-div-in-center-of-screen-view