如何使盒子内部元素居中？已用justify-content:center无效求方案

你遇到的核心问题是：justify-content: center; 是Flex容器专属属性，当前你的.pricing-plan没有设置display: flex;，所以这个属性完全不会生效。下面给你几个可行的解决方法：

方法一：Flex布局（推荐适配你的内容结构） #

给.pricing-plan添加Flex容器属性，同时设置垂直排列方向，让内部元素整体水平+垂直居中：

.pricing-plan {
  border: 5px solid ghostwhite;
  width: 200px;
  height: 200px;
  background-color: gainsboro;
  border-radius: 10%;
  /* 新增Flex相关属性 */
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列，匹配标题、价格、列表的结构 */
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向居中 */
}

方法二：Grid布局（极简写法） #

用Grid布局可以一行代码实现双方向居中：

.pricing-plan {
  border: 5px solid ghostwhite;
  width: 200px;
  height: 200px;
  background-color: gainsboro;
  border-radius: 10%;
  /* Grid布局实现居中 */
  display: grid;
  place-items: center;
}

方法三：文本类元素单独水平居中（仅适配文字场景） #

如果只需要让内部文本类元素水平对齐，不需要垂直居中，可以单独设置文本对齐：

.pricing-plan .plan-title,
.pricing-plan .plan-price {
  text-align: center;
}
.pricing-plan .plan-features {
  padding-left: 0;
  text-align: center;
  list-style: none; /* 可选：去掉列表默认的左侧缩进和圆点 */
}

另外注意你的HTML存在标签错误：<button class="plan-button">Sign Up</a> 标签不匹配，要把</a>改成</button>，避免页面结构异常。

内容的提问来源于stack exchange，提问作者P. S.