垂直对齐未考虑边距

Question

我正在尝试将内容以固定高度<div>垂直居中。

我正在使用top:50%和transform:translateY(-50%)的技术来执行此操作，但是我不明白为什么未考虑子元素的margin，而是考虑了{ {1}}是。

如果运行下面的代码段，则可以看到左框（其中padding元素具有浏览器默认边距）的内容的垂直对齐方式比右框（其中<p>的内容）低元素的边距已删除，并替换为<p>），它完全位于中心。

为什么用边距引起此问题，但是填充不是？

padding

*, *::before, *::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.container {
  height: 100px;
  border:1px solid #000;
  margin-right:5%;
  width:45%;
  float:left;
}
.content {
  position:relative;
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  background-color:cyan;
}
.no_p_margin p {
  margin:0;
  padding:8px;
}