html - 垂直对齐的百分比边距的 CSS 问题

Question

我的问题是:

我想要一个覆盖框(在示例中是带虚线边框的 div)，它位于较大背景内容的中心(在我的例子中是谷歌地图，在示例中由蓝色背景表示。

我正在使用 Chrome(最新版本)，我发现我可以做我想做的(某种程度上)，但我做这件事的方式在水平调整屏幕大小时不太有效，即顶部(即虚线和蓝色框顶部之间的距离)与屏幕宽度相比似乎改变了它的垂直距离(这对我来说很奇怪)。

代码为:

<div style="position: relative; height: 100px; display: block; background-color: green">
   <div style="background-color: blue; position: absolute; width: 100%; height: 100%">b</div>
   <div style="border-width: 2px; border-style: dashed; margin: 5% 5% 5% 5%; width: 90%; height: 90%; position: absolute"></div>  
</div>

A JS fiddle example of the problem

根据我的阅读，有 some information谈论确定高度等的父 block ，但我有点迷失，因为我似乎缺少一些知识，而且我的方法可能是完全错误的，因为我正在尝试这样做。我真的不想以编程方式指定高度或宽度，但宽度似乎以可扩展的方式工作。

Answer 1

以百分比表示的边距与宽度相关，因此只需设置顶部、左侧、右侧、底部属性即可。

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

阅读更多:https://developer.mozilla.org/en-US/docs/Web/CSS/margin