页面按钮无法居中，已尝试align-self:center仍无效，求解决方案

方法一：Flex布局实现（推荐） #

你写的align-self: center没生效，核心原因是article不是Flex容器——align-self属性仅对Flex容器的直接子元素生效。给父元素article开启Flex布局并设置垂直排列后，按钮就能通过该属性实现水平居中：

.container article {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 保持标题、文本等内容左对齐，可按需调整 */
}

.container article button {
  align-self: center;
}

方法二：margin自动居中 #

如果不想改动父元素布局，直接给按钮设置块级显示+左右自动外边距，同样能实现水平居中：

.container article button {
  display: block;
  margin: 0 auto;
}

你的HTML结构无需修改：

<div class="container">
  <article>
    <h3>Free</h3>
    <h4>Forever Free Plan</h4>
    <p>Our generous free forever plan provides you with plenty to get started and get addicted to the tools that will take your work to the next level. No credit card required to get started.</p>
    <ul>
      <li>Unlimited pages & links</li>
      <li>Up to 5 gigabytes of storage</li>
      <li>Up to 20 databases</li>
      <li>Share up to 50 pages via URL</li>
      <li>Up to two guest users per page</li>
    </ul>
    <button>Sign Up Now</button>
  </article>
</div>

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