Html CSS问题，带有垂直对齐的百分比边距 我的问题是：

我希望有一个覆盖框（在本例中是虚线边框的div），它位于更大背景内容的中心（在我的例子中是一个谷歌地图，在本例中由蓝色背景指示）

我使用的是Chrome（最新版本），我发现我可以做我想做的（某种程度上），但我这样做的方式在水平调整屏幕大小时不太管用，即顶部的边距（即虚线和蓝色框顶部之间的距离）与屏幕宽度相比，它的垂直距离似乎发生了变化（这对我来说很奇怪）

代码是：

B

---

从我所读到的内容来看，有关于父块决定高度等的讨论，但我有点迷茫，因为我似乎缺少一点知识，我的方法可能完全错误，因为我试图这样做。我真的不想以编程方式指定高度或宽度，但宽度似乎在一个特定的环境中工作可扩展方式。

百分比边距与宽度相关，所以只需设置顶部、左侧、右侧和底部属性即可

<div style="top: 5%; left: 5%; right: 5%; bottom: 5%; position:absolute"></div>

---

阅读更多信息：

您可以将此样式用于边框：

---

margin:5%5%5%；

可以缩短为

margin:5%；

<div style="top: 5%; left: 5%; right: 5%; bottom: 5%; position:absolute"></div>

#border{
    border-width: 2px;
    border-style: dashed;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    position: absolute;
}