子元素设置padding/margin-top后超出父div的技术问题咨询

嘿，这个坑我之前踩过好几次！你遇到的问题核心在于CSS里一个容易被忽略的规则：padding和margin的百分比值，都是相对于父元素的宽度来计算的，不是你以为的高度！

为什么会出现这个问题？ #

你的父元素.parent设置了width:100%（也就是和当前视口宽度一致），假设当前视口宽度是1000px，那padding-top:50%计算出来的就是500px——刚好等于父元素的高度！这就导致p元素的上边内边距直接把自己“顶”到了父元素的外面，看起来就像跑到了下方。换成margin-top:50%也是一样的道理，因为margin的百分比同样是按宽度计算的。

几种靠谱的解决方案 #

1. Flex布局（最推荐，现代CSS方案）

给父元素添加Flex属性，直接实现垂直居中，简单又省心：

.parent {
  width: 100%;
  height: 500px;
  background: red;
  display: flex;
  align-items: center; /* 实现垂直居中 */
  /* 如果需要同时水平居中，再加一行：justify-content: center; */
}

子元素不需要额外设置padding或margin，直接正常编写内容即可。

2. 绝对定位 + Transform

如果需要兼容一些旧浏览器，或者Flex布局不适用你的场景，可以用绝对定位的方式：

.parent {
  width: 100%;
  height: 500px;
  background: red;
  position: relative; /* 父元素设为相对定位，作为子元素的定位基准 */
}
.parent p {
  position: absolute;
  top: 50%; /* 先把元素顶部移到父元素垂直中点 */
  transform: translateY(-50%); /* 再把元素向上移动自身高度的50%，实现完美居中 */
  /* 要水平居中的话，改成：transform: translate(-50%, -50%); 同时加上 left: 50%; */
}

3. 固定值（仅适用于父元素高度固定的场景）

因为你的父元素高度是固定的500px，也可以直接用固定值的margin/padding：

.parent p {
  margin-top: 250px; /* 500px的一半，直接垂直居中 */
}

不过这种方法的局限性很大，如果父元素高度后续变成动态的，就需要重新调整数值，不如前两种方法灵活。

内容的提问来源于stack exchange，提问作者SuccessDavis