自定义WordPress站点页脚组件内的div如何实现水平对齐？

• 所有长度属性缺少必要的CSS单位：你代码里写的bottom: 150、height: 150、height:100这类数值没加px单位，浏览器根本不认这些有效数值，会直接把对应的样式丢掉，自然出不来你要的三层堆叠对齐效果
• 布局逻辑冗余易错：给3个div单独写固定定位，还要手动计算每个层相对于视口底部的偏移量，很容易算错出现层之间的缝隙、错位，是新手做固定页脚最容易踩的坑
• 没有做默认样式重置：h1这类标题标签自带默认的上下外边距，会无故撑出额外的空白，打乱整体高度计算
• 标签位置不规范：style标签要放在页面头部区域，不要直接嵌套在body标签内部，部分浏览器会对这类写法做兼容性处理，出现样式加载异常
• 没有考虑固定页脚的遮挡问题：页脚固定在视口底部后，会盖住页面最下方的正文内容，需要给主内容区预留对应高度的留白

/* 全局基础重置，新手做布局必须配置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 把固定定位的逻辑放在footer外层标签上，不用每个子div单独写定位 */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.dust-footer {
  height: 150px;
  width: 100%;
  background-color: red;
  color: white;
  /* 三行代码实现div内内容垂直水平居中，不用硬调边距 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mix-footer {
  height: 100px;
  width: 100%;
  background-color: yellow;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-footer {
  min-height: 50px;
  width: 100%;
  background-color: gray;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 给页面主内容区加对应高度的底部留白，避免被固定页脚遮挡 */
.site-main-content {
  padding-bottom: 300px; /* 数值等于三层footer的总高度 */
}

对应的HTML结构不需要做复杂调整，保持原有嵌套关系即可：

<footer>
  <div class="dust-footer">
    <h1>DustMasters</h1>
  </div>
  <div class="mix-footer">
    <h1>Mix Section</h1>
  </div>
  <div class="nav-footer">
    <h1>Navigation</h1>
  </div>
</footer>

• 除了数值为0的属性，所有带长度的CSS属性必须写单位，不然样式直接失效
• 多层元素堆叠的时候，尽量把定位逻辑放在最外层容器上，内部元素按正常文档流排列，不要每个子元素单独写定位，减少重复计算出错的概率
• 用flex做内部内容对齐，比手动调margin、padding的适配性更强，不同屏幕尺寸下不会出现内容偏移

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