为什么字体大小会改变父div的尺寸与内边距，如何实现p标签完美居中？

1. 调整p标签字体大小后黄色盒子尺寸变化的原因 #

• 你当前的.box类没有设置固定高度，默认高度由内部内容的总高度决定
• 浏览器原生p标签默认带有上下外边距，字体大小调整后，p标签本身的内容高度、默认行高、默认外边距相加的总高度会发生变化，自然会把未设置固定高度的.box撑开
• 同时#container1的flex布局默认align-items: stretch规则会让两个.box的高度始终保持一致，只要其中一个被内容撑开，另一个也会同步变高

2. p标签设置margin: 0后文字紧贴顶部的原因 #

• 原生p标签默认的上下margin会让文字和.box边框自带一定间隔，把margin设为0后这部分默认间距直接消失
• 你没有给.box或者p标签设置垂直对齐规则，文字默认靠上排布，就会直接贴在.box的顶部边框位置

1. 不改变父容器尺寸的前提下增大字体大小 #

核心是固定.box的尺寸，避免被内容撑开，修改CSS如下：

.box {
  border: 1px black solid;
  background-color: yellow;
  width: 100%;
  /* 新增以下属性 */
  height: 100%; /* 高度和父容器container1保持一致 */
  box-sizing: border-box; /* 把border计算入总高度，避免border撑大盒子 */
  overflow: hidden; /* 可选：如果字体过大超出盒子范围，隐藏溢出内容，不会改变盒子尺寸 */
}

设置完成后可任意调整p标签的字体大小，.box和外层父容器的尺寸都不会发生变化，如果不想文字被裁剪，控制字体大小+行高的总高度不超过盒子高度即可。

2. 让p标签在父div内完美居中 #

推荐使用flex布局实现，适配单行、多行文字场景，修改.box的CSS即可：

.box {
  border: 1px black solid;
  background-color: yellow;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 新增居中相关属性 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.box p {
  margin: 0; /* 清除默认边距，避免位置偏移 */
}

如果是单行文字，也可以用行高法：给p标签设置line-height等于.box的高度，配合原有的text-align: center也能实现居中，不过该方案仅适配单行文本场景。

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