CSS移动端居中的问题

cqwcns 发表于 2022-7-12 13:46

以下Demo，需求是实现一个图片的水平居中显示，代码是这样的：
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>测试</title>
</head>

<style>
html,
body {
   margin: 0;
   padding: 0;
}

.content {
   width: 100%;
   display: flex;
   justify-content: center;
}

.img {
   width: 643px;
   aspect-ratio: 643/3213;
   background-image: url("https://s1.ax1x.com/2022/07/12/jgl0MV.png");
   background-size: cover;
}
</style>

<body>

<div class="content">
   <div class="img"></div>
</div>

</body>

</html>

效果：在PC浏览器下，一切正常，效果大概是这样的：

问题：在于移动端测试时，无论时在浏览器仿真还是在真是的手机浏览器中，都会出现偏移，硬生生在左侧留出空白，导致无法居中显示：

我希望移动端已PC端有一样的效果，保持居中。
研究了半天也找不出问题，请各位大佬指教，谢谢。

xy308058 发表于 2022-7-12 14:10

.imgwidth: 100%;

271378333 发表于 2022-7-12 14:24

html写的太简单了，规定一下内容宽度
<meta name="viewport" content="width=device-width">

一只小凡凡 发表于 2022-7-12 14:44

3楼正解！

rainbow270118 发表于 2022-7-12 15:28

三楼正解，移动端宽度不固定，你的.img设置的width太大了，而且aspect-ratio保持了长宽比得设置

页: [1]

吾爱破解 - 52pojie.cn's Archiver

CSS移动端居中的问题