css - CSS:具有自动高度的垂直和水平居中

This question already has answers here:

Vertically centering a div inside another div [duplicate]

                                    （24个答案）


                                2年前关闭。


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

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

它在1920x1080分辨率下完美工作。但是使用其他分辨率时，div向下移动并且垂直居中不再起作用。我找不到这个问题的解决方案。有谁知道我的问题吗？

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

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

最佳答案

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

.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 - CSS:具有自动高度的垂直和水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47377035/

上一篇：css - 当我的文本出现 css 时淡出效果

下一篇：html - 让页面背景随用户滚动

javascript - 用户查看页面后启动 CSS3 转换？

javascript - react 响应轮播 : How to display portrait orientation images while preserving aspect ratio and minimizing cropping?

html - 将线性梯度语法转换为 -webkit-gradient 语法

javascript - Electron 应用程序无法正常工作，控制台显示 'require not defined'

css - 在 (':' :(value)"declaration. css 全局变量中的冒号 "(property)"之前缺少属性名称)

html - 移动 View 错位

html - 使用 css 对齐中心

html - 单独覆盖 CSS 网格模板列

html - 在表格单元格内的两个图像之间放置一个 Div