即使在调整窗口大小时，绝对定位的元素也会居中

Question

有大量关于居中绝对定位元素的文章，但它们都是固定尺寸和固定窗口。

但是，我想要居中的位置：绝对元素的尺寸是根据浏览器的大小变化的（mxn-width）。我希望我的元素保持水平居中，无论窗口大小如何，甚至当用户更改窗口大小时。

没有JS可以实现吗？

Answer 1

根据我对你的问题的理解，这可以通过

来解决

# divId {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}

Answer 2

你可以这样做：

#myDiv {
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}

考虑到需要根据div的大小调整百分比。如果你有一个400px宽的元素而你使用左边50％它将不会完全位于中间，因为它从div的左边界计算50％，而不是div的中心。

Answer 3

通过使用百分比，无论元素的大小或浏览器窗口如何，都可以使块元素居中。这可以通过使用left:50%;和top:50%;将元素的左上角设置为屏幕的中心来实现，然后使用margin:-25%;将其向后偏移25％。

高度和宽度也必须设置为50％。设置顶部和左侧（和/或底部和右侧）将块拉出正常流量并像position:fixed和position:absolute那样对待它。因此，它位于不同的z-index层上，并将覆盖正常流中的元素。

这个应用于<div>的CSS类使其成为浏览器窗口大小的一半，水平和垂直，并使其居中。由于<div>不在正常流程中，因此适用于创建纯CSS弹出窗口...

.blockCenter {
  display:  block;
  height:   50%;
  left:     50%;
  margin:   -25%;
  top:      50%;
  width:    50%;
}

这个类不是50％宽和50％高，而是使元素宽50％，高90％。请注意，上边距必须始终为负值的一半，以使其保持居中...

.blockCenterTall {
  display:  block;
  height:   90%;
  left:     50%;
  margin:   -45% -25%;
  top:      50%;
  width:    50%;
}