如何在div容器内居中放置自定义按钮，选什么标签合适

标签选型的实际选择 #

逐个拆解你纠结的三个标签的适配性，对应你之前踩过的坑做说明：

• p标签可以直接排除：你之前遇到的“背景色占满整个文本行”不是代码写错了，是p的块级元素固有属性——只要是块级元素，默认就会撑满父容器的100%可用宽度，哪怕容器里只放两个字，背景也会拉满整行，根本没法做出贴合文字大小的按钮形态。
• 不推荐span标签：span是行内元素，虽然不会像p那样占满整行，但它没有任何交互语义，屏幕阅读器识别不出来这是可点的按钮，无障碍体验很差，而且行内元素不支持自由设置上下方向的内边距，后续要调按钮的点按热区会非常麻烦。
• 你对button标签的顾虑，其实是对浏览器默认样式的误解，根本不需要绕开使用：
• 你提到的“自带默认边框、默认点击跳转逻辑”，从来不是button标签的强制属性：浏览器给button加的默认样式都是可以用CSS完全覆盖清除的；跳转逻辑只有在button处于表单内、没设置type属性时才会触发默认提交，只要给button加上type="button"，它就完全没有自动跳转/提交的行为，和你用span、p写的伪按钮交互逻辑完全一致。
  而且button原生支持键盘聚焦、回车触发点击的能力，比p、span做出来的按钮体验好太多，是这个场景下最优的标签选择。

居中实现的可落地代码 #

针对你现在固定宽高的.box容器，用Flex布局做居中是最省心的方案，不需要写复杂的绝对定位、margin计算，直接在你现有代码上改就行：

1. 给.box容器加三行配置，直接实现内部子元素的水平+垂直双居中：

   .box {
       width: 280px;
       height: 300px;
       background-color: rgb(221, 20, 20);
       /* 新增的居中配置 */
       display: flex;
       justify-content: center;
       align-items: center;
   }
   

2. 给.button类补充清除默认样式的代码，再加上按钮需要的基础样式，后续你想换独立背景色、加圆角、调边距都可以直接在这个类里改，完全不会影响居中效果：

   .button {
       /* 清除button的所有浏览器默认内置样式 */
       border: none;
       margin: 0;
       padding: 0;
       /* 你原本定义的样式 */
       background-color: rgba(57, 133, 57, 0.1);
       font-size: 13px;
       /* 补充实用的按钮样式 */
       padding: 6px 12px; /* 留出舒适的点按热区 */
       cursor: pointer;    /* 鼠标悬浮显示手型，提示可点击 */
   }
   

3. 最后改一下HTML结构，把原来的p标签换成带type属性的button就行：

   <div class="box">
     <button type="button" class="button">Read More</button>
   </div>
   

实际运行效果：按钮的背景只会包裹文字和你设置的内边距，不会出现p标签那种占满整行的问题，同时稳定保持在红色box容器的正中心，后续不管你怎么改按钮的文字长度、背景色、内边距，居中效果都不会乱。

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