页面没有按钮居中

Question

我一直在努力，但没有任何效果，
https://jsfiddle.net/lucianopinochet/fzse5962/
如果有人有想法，我会非常感谢你。

.container article button{
align-self: center;

}

<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>

Answer 1

试试这个：

div{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

<div>
   <button>submit</button>
</div>

垂直和水平按钮将通过此代码居中。