Question

我试图制作一个矩形div，它的视口宽度为95％，高度为20％。但是我想要另一个矩形div，它是垂直和水平居中的，具有轻微的2px边距。

.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

这取决于要求。但问题是，答案就是这样。如有任何问题，请查看并通知我

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

尝试使用相对测量单位，以防您处理响应式设计。 .outer框为display: table，Inner为display: table-cell。他们完美地坐在一起，你要求的2px保证金由.Outer

的2px填充提供

＆＃13;

html {
  box-sizing: border-box;
  font: 500 16px/1.428'Consolas';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
}
.Outer {
  position: absolute;
  top: 20%;
  left: 3%;
  outline: 1px solid #ccc;
  max-width: 95vw;
  max-height: 20vh;
  width: 95vw;
  height: 20vh;
  margin: auto;
  display: table;
  padding: 2px;
}
.Inner {
  border: 1px solid hotpink;
  width: 95%;
  height: 95%;
  margin: auto;
  display: table-cell;
}

＆＃13;

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

＆＃13;

Answer 3

我不是100％这是你想要的，因为它有 Magic Numbers ，但这里是我用你提供的代码提出的JSFiddle。

#Outer {
    border: 1px solid #ccc;
    max-width: 95vw;
    max-height: 20vh;
    width: 95vw;
    height: 20vh;
    margin: auto;
    display: block;
    position: relative;
    }
#Inner {
    border: 1px solid hotpink;
    width: 95%;
    height: 50%;
    position: aboslute;
    margin-top: 5vh;
    margin-left: 2.5vw;
    }

<div id=Outer>
  <div id=Inner>
  </div>
  </div>

JSFiddle

希望这会有所帮助，你可以利用它来使用视点上的百分比而不是幻数。

Answer 4

当我想垂直居中时，我有几个课程可以帮助我做到这一点。

    .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: 90%;
    margin: auto;
    }

    .valign-wrap {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    }

    .valign-wrap .valign {
    display: block;
    }

<div class="outer valign-wrap">

    <div class="inner valign center"></div>
  
</div>

JSFiddle

我总是建议将这些类添加到您的项目中，它们非常有用。祝你好运！

如何将矩形div置于另一个矩形div内

4 个答案: