CSS - 如何将一个盒子完全集中在另一个盒子中？

Question

我正在学习CSS作为初学者并做一些基本测试。我的问题是：鉴于下面的CSS，如何将box2放在box1的正中间？

.box1 {
  background: black;
  height: 400px;
  width: 400px;
  margin: auto;
}

.box2 {
  height:300px;
  width:300px;
  background: red;
  margin: auto;
}

一开始我认为给box2一个自动上限，所以box2与顶部和底部的距离相等，但我得到了这个结果。

看起来它设置左右边距自动，但不是顶部和底部。

因此，如果我自己给出一个保证金，那就像这样。

代码：

.box2 {
   margin: 20px auto;
}

我怎么能这样做，box2完全集中在box1？

Answer 1

＆＃13;

＆＃13;

.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}

.box2 {
height:300px;
width:300px;
background: red;
position:relative;
left:12.5%;
top:12.5%;
}

＆＃13;

<div class="box1">
<div class="box2">

</div>
</div>

＆＃13;

＆＃13;

＆＃13;

试试这个。

Answer 2

.box1 {
background: black;
height: 400px;
width: 400px;
display:flex;
justify-content:center;
align-items: center;
}

.box2 {
height:300px;
width:300px;
background: red;
}

<div class="box1">
<div class="box2"></div>
</div>

Answer 3

您可以使用flexbox

执行此操作

.box1 {
  background: black;
  height: 400px;
  width: 400px;
  margin: auto;
  display:flex;
  align-items: center;
  justify-content: center;
}

.box2 {
  height:300px;
  width:300px;
  background: red;
  margin: auto;
}

<div class="box1">
  <div class="box2">
  </div>
</div>

Answer 4

.box1 {
  position:relative;
  background: black;
  height: 400px;
  width: 400px;
  margin: auto;
}

.box2 {
  position:absolute;
  height:300px;
  width:300px;
  background: red;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

检查小提琴：https://jsfiddle.net/wh4yqk2y/