Question

嘿，我有这个div，在div里面有一个button。我想将div水平和垂直居中。另外，我想将button在div内水平和垂直居中。这是我的代码。

<div style='position: relative; left: calc(50% - 250px); top: calc(50% - 100px); border: 1px solid black; width: 500px; height: 200px;'>
  <button style='position: absolute; width: 100px; height: 30px; left: calc(50% - 50px); top: calc(50% - 15px);'>
    Submit
  </button>
</div>

按钮在div内的定位效果很好。但是我很好奇为什么div将水平居中而不是垂直居中？我假设它与position: relative有关？但是我不确定。

感谢您的帮助！

Answer 1

因为DIV没有相对高度（百分比）的参考-父元素-在这种情况下为body-没有设定的高度。添加此规则，它将根据需要居中：

html,
body {
  height: 100%;
  margin: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

<div style='position: relative; left: calc(50% - 250px); top: calc(50% - 100px); border: 1px solid black; width: 500px; height: 200px;'>
  <button style='position: absolute; width: 100px; height: 30px; left: calc(50% - 50px); top: calc(50% - 15px);'>Submit</button>
</div>

为什么不使用相对定位使此div垂直居中？

1 个答案: