如何实现响应式正方形居中？

Question

响应式正方形我用padding-top继承父元素宽度的特性来实现，居中用margin:auto实现，两个问题分别都可以实现，但要同时完成就不会了。。。

Answer 1

<style>

#box .square{
    position: absolute;
    padding:10% 10%;
    background: red;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

</style>
<div id="box">

<div class="square">
</div>

</div>

Answer 2

有一个 div#wrapper 元素，高、宽度都未知。它其中有一个宽高都为 100px 的 div#box 元素，请你完成 CSS，使得 div#box 在 div#wrapper 内水平、垂直方向居中。

你是想问类似问题？

<div id='wrapper'>
  <div id='box'></div>
</div>

// flex 布局
// 优点：只设置wrapper即可。
// 缺点：高版本浏览器才支持flex和justify-content，align-items。
#wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}
#box {
  width: 100px;
  height: 100px;
}

// 定位
// 优点：box是absolute元素，对其他元素没有影响。
// 缺点：transform的兼容性问题。
#wrapper{
  position:relative;
}
#box {
  position:absolute;
  width: 100px;
  height: 100px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}