<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>

有一個(gè) div#wrapper 元素，高、寬度都未知。它其中有一個(gè)寬高都為 100px 的 div#box 元素，請你完成 CSS，使得 div#box 在 div#wrapper 內(nèi)水平、垂直方向居中。

你是想問類似問題？

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

// flex 布局
// 優(yōu)點(diǎn)：只設(shè)置wrapper即可。
// 缺點(diǎn)：高版本瀏覽器才支持flex和justify-content，align-items。
#wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}
#box {
  width: 100px;
  height: 100px;
}

// 定位
// 優(yōu)點(diǎn)：box是absolute元素，對其他元素沒有影響。
// 缺點(diǎn)：transform的兼容性問題。
#wrapper{
  position:relative;
}
#box {
  position:absolute;
  width: 100px;
  height: 100px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}