开发层级列表练习jQuery拖拽时，H1居中写法是否会遗留问题？

现有写法的核心问题 #

你当前的写法属于硬编码适配固定场景，没有本质错误，但是可维护性、可扩展性极差，稍作修改就会错位，确实存在你感知到的疏漏：

• 文本居中逻辑完全依赖固定margin值：现在的margin: 40px 35px是刚好适配「Rank」四个字符、2em字号的情况，如果后续你要修改层级文本（比如换成S/A/B/C级这类标识）、调整字号、修改红色盒子宽度，都需要重新计算margin值，很容易出错。
• 彩色盒子高度硬编码冗余：你给header设了130px高度、3px边框，为了适配就给内部div写死了124px高度，明明你已经开启了box-sizing: border-box，直接给内部div设height: 100%就能自动撑满父元素高度，完全不需要手动计算差值，后续修改header高度也不需要同步调整div参数。
• 没必要的绝对定位：这里h1完全不需要设置绝对定位，属于布局逻辑冗余。

优化方案 #

推荐用Flex布局实现，适配性更强，不用硬编码数值：

/* 其他全局、header样式保持不变，修改以下两个选择器即可 */
header div {
  background-color: rgb(191, 57, 57);
  width: 140px;
  height: 100%; /* 自动适配父元素高度，不用写死124px */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  box-sizing: border-box;
}

header div h1 {
  color: rgb(255, 255, 255);
  font-size: 2em;
  margin: 0; /* 清除h1默认margin即可，不需要固定数值 */
}

修改后不管你换什么文本、调整字号，都会自动在红色盒子里居中，后续改header高度也不需要调整内部div的参数。
额外小提示：如果是每个层级行的标识，用<h2>或者普通<span>比<h1>更符合语义规范，一个页面建议只保留一个<h1>作为页面主标题。

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