css - CSS Splash无法使图像在所有尺寸上居中

页面加载时，我的软件会加载一个初始图像。

在窗口的当前大小为1024px的情况下，图像加载居中，但是当使窗口开始最大化时，图像在左侧太大了。

这是我的CSS：

#splash {
  width: 700px;
  height: 50px;
  line-height: 50px;
  margin: 14% 14%;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

#splash img {
  width: 700px;
  height: auto;
}

如何更改此CSS，使其以任何窗口大小为中心加载？

最佳答案

您的代码需要整理一下。查看我为您准备的更新的小提琴，其中有一些改进可以解决您的问题：https://jsfiddle.net/Ly06krt3/29

您需要做：

#splash {
   max-width: 700px;
   height: auto;
   line-height: 50px;
   margin: 0 auto;
   box-sizing: border-box;
   text-align: center;
   z-index: 1;
   width: 100%;
}

#splash img {
  width: 100%;
  height: auto;
}

将div居中。我在max-width ID中添加了#splash；这将赋予它固定的宽度，直到浏览器到达该点为止，然后由于width: 100%而将其调整大小。

您还需要使代码更易于响应。因此，为img添加一个百分比宽度将在调整浏览器大小时使其具有流动性。

关于css - CSS Splash无法使图像在所有尺寸上居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52500306/