CSS实现<div>水平居中遇阻，是否与clearfix属性相关？

首先得明确一个关键知识点：CSS的padding属性不支持auto值，这就是你设置padding-right: auto完全无效的原因！要实现块级元素的水平居中，正确的做法是用margin-left: auto和margin-right: auto，而不是padding。

接下来针对你的场景，我来拆解解决方案：

1. 核心修复代码 #

先去掉你之前针对#main的部分冗余样式，然后给#primary添加以下CSS（通过WordPress附加CSS添加）：

.page-id-6711 #primary {
  /* 先取消可能存在的浮动，浮动会让margin:auto失效 */
  float: none !important;
  /* 实现水平居中的关键 */
  margin-left: auto !important;
  margin-right: auto !important;
  /* 设置一个最大宽度，保证小桌面屏的响应式效果，数值可以根据你的需求调整 */
  max-width: 1200px;
  /* 保留你需要的上下内边距，左右用margin控制居中，不用padding */
  padding-top: 20px;
}

/* 调整#main的基础样式，避免破坏响应式 */
.page-id-6711 #main {
  padding-top: 20px !important;
  /* 让#main保持自适应宽度，不要强制100% */
  width: auto !important;
}

2. 为什么之前的尝试无效？ #

• padding:auto不合法：根据CSS规范，padding的取值只能是长度、百分比或者inherit，auto是不被允许的，所以设置了也不会生效。
• 浮动影响：如果你的主题给#primary设置了float: left或者float: right，那么margin:auto会完全失效——浮动元素会脱离文档流，无法通过margin自动分配剩余空间实现居中。
• 强制width:100%：你之前给#main设置width:100% !important，会让父容器占满整个视口，即便#primary设置了margin，也没有多余空间来实现居中效果。

3. 关于clearfix的疑问 #

clearfix的作用是让父容器包含浮动的子元素，它本身不会直接影响子元素的居中。除非你的#primary因为父容器的clearfix设置了某些特殊属性（比如overflow:hidden），但一般来说clearfix和居中是不冲突的，你遇到的问题和clearfix无关。

4. 响应式保障 #

设置max-width而不是固定宽度，能让#primary在大屏幕上有一个最大宽度，小屏幕上自动收缩到适配视口，不会破坏移动端的响应式效果，和你原本的移动端正常显示的需求匹配。

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