我的 HTML 有几个带有 display: inline-block 的内部 div，在带有 text-align: center; 的外部 div 中。这是预期的行为:在大屏幕上，一些 div 将并排显示(多少取决于每个内部 div 和外部 div 的大小)并且集合将居中对齐。当屏幕宽度变窄时，div 将重新定位，在小型智能手机屏幕中，我们每行只有一个 div，居中对齐。
这是我的 MCVE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Align center</title>
<style type="text/css">
body {
background-color: white;
}
div.container {
margin: auto;
max-width: 1000px;
text-align: center
}
div.block {
margin: 4px;
display: inline-block;
width: 320px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>如果您更改窗口的大小，您会看到 div 重新定位(SO fragment 非常小，无法看到此行为，但您可以单击“整页”并调整窗口大小)。
我的问题:
在智能手机中，每行只有 1 个 div，这正是我想要的。但我的问题是 div 在 iPhone 上没有居中对齐，尽管在 Android 手机上是完美对齐的。
使用上面的代码，这是在安卓手机上的结果，你可以看到左右两边的白边是一样的:
但现在在 iPhone 上:
div 稍微偏右。
如何使 div 居中对齐？
注意 1:我在问题标题中写了 Android 和 iPhone 因为我不确定这个问题是否取决于操作系统 ( Android 与 iOs)或浏览器(移动 Chrome 与移动 Safari)。我不认为这是 Safari 的问题，因为 iPad 和 MacBook 上的 div 是可以的。
注意 2:这可能不是“对齐”问题:在 iPhone 上，就像 div 没有被“压缩”以适合屏幕。
最佳答案
在你的头标签中添加这个，
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
从你的 CSS 中移除 div.container
将 block css 更改为
.block {
width: 100%;
height: 400px;
background-color: green;
display: flex;
justify-content: center;
align-content: center;
}
如果你想在全屏的 1 行中一次显示 3 个 block :
<div class="container">
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
</div>
关于android - Div 在 Android 上居中对齐但在 iPhone 上不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38247868/