Question

我想将div垂直和水平居中，固定宽度和自动高度。目前我使用这个例子：

width: 580px;
top: 33%;
right: 0;
left: 0;
margin: auto;
display: inline-block;
position: absolute;

完美搭配1920x1080分辨率。但是对于其他分辨率，div会向下移动，垂直居中不再起作用。我找不到解决这个问题的方法。有没有人对我的问题有所了解？

编辑：我尝试使用翻译功能，但页面看起来模糊/像素化。

编辑：不同的是我不会使用固定高度！

Answer 1

您可以使用translate功能非常有效地执行此操作。关键是要将元素包含在相对定位的容器中，如下所示：

.container {
  position: relative;
  width:100%;
  min-height:100%;
}
.inside-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
  width:70%;
  margin:0 15%;
}

CSS：垂直和水平居中，自动高度

1 个答案: