css - 如何将一个矩形 div 居中放置在另一个矩形 div 中

Question

我正在尝试制作一个矩形 div，它的宽度为视口(viewport)的 95%，高度为 20%。但我想要另一个矩形 div 在其中，垂直和水平居中，边距为 slight2px。

.Outer {
    border: 1px solid #ccc;
    max-width: 95vw;
    max-height: 20vh;
    width: 95vw;
    height: 20vh;
    margin: auto;
    display: block;
    }
.Inner {
    border: 1px solid hotpink;
    width: 95%;
    height: 95%;
    margin: auto;
    }

Answer 1

这取决于要求。但是根据问题，这里是答案。请看一下，如果有任何问题，请告诉我

.Outer {
  width: 95vw;
  height: 20vh;
  border: 1px solid #ccc;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Inner {
  border: 1px solid hotpink;
  
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}

<div class="Outer">
  <div class="Inner"></div>
</div>