Html 使用视口坐标将div居中对齐

我正在学习CSS，我是这个领域的新手。如果我的问题很幼稚，请原谅

我有一个简单的

HTML

包含1个

div

.square{
背景颜色：蓝色；
宽度：90vw；
高度：90vh；
左边距：5vw；
保证金权利：5vw；
}

您可以执行以下操作： 给出最大值，然后减去10%（每边5%），然后用自动边距居中

CSS

.square {
    background-color: blue;
    width: calc(100vw - 10%);
    height: 100vh;
    margin: 0 auto;
}

---

既然您说您是HTML和CSS新手，那么让我简要介绍一下如何基于视口调整元素宽度

---

视区 视口是浏览器中显示实际内容的区域，即不带工具栏和按钮的web浏览器。单位为

vw

、

vh

、

vmin

和

vmax

。它们都表示浏览器（视口）尺寸的百分比，并在调整窗口大小时相应缩放

假设我们有一个1000像素（宽）乘以800像素（高）的视口：

• vw-表示视口宽度的1%。在我们的例子中，50vw=500px
• vh-窗户高度的百分比。50vh=400px
• vmin-两个最小值的百分比

在我们的示例中，50vmin=400px 因为我们处于横向模式。vmax-较大值的百分比 维50vmax=500px

您可以在任何可以指定像素值的地方使用这些单位，如

宽度

，

高度

，

边距

，

字体大小

和更多。在调整窗口大小或设备旋转时，浏览器将重新计算它们

---

案例1 现在考虑到你的问题，我看不到两边的宽度有任何变化，因为如果你看到你的检查器->布局->边距，我可以看到你提供的屏幕截图上两边都显示了64

案例2 如果你真的再次看到你的系统发生了变化。尝试删除您提到的外部CSS，看看这是否会导致任何问题，然后为html和正文添加

margin:0px

---

希望这能帮到你

我想了解为什么左边的空白比右边的多，因为正文中有默认的空白，html。只要这样做

body，html{margin:0；}

Yes，我想我们从用户代理样式表中获得了8px的边距。8px边距在两侧。但是，仍然（如果我不将body和html的边距重置为0），左间距约为69像素，右间距为53像素。我用截图和mac上的预览应用来测量它。当然，如果你只使用视口测量，你会从查看端口得到尺寸。从左到右，您将获得5vw+（浏览器默认边距），然后它将忽略右边距，因为数学上不正确（边距10vw+90vw+浏览器边距）。如果你设定了你的保证金，用我的答案一样的百分比。这将进行更好的调整和良好的数学处理（视口，事实上还有元素的边距）。这也是我所怀疑的，但我不确定浏览器在这些情况下是否会删除其用户代理样式。注意：

标记不使用，也不需要斜杠，而且在HTML中从未使用过。