Html 水平CSS对齐

有人能解释一下我是如何把我的按钮放在红色区域的中心的，而不管按钮的宽度是多少吗

这是我的演示：

这是我的代码：

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test</button>
        <button>Test 2</button>

    </div>

</div>

<hr />

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test Test Test Test Test Test</button>
        <button>Test 2</button>

    </div>

</div>

试验
测试2

测试测试
测试2

您可以在第二个示例中看到，下面是第二个按钮，实际上我希望它们保持内联，就像上面的按钮一样

我很乐意删除

width:160px

语句，但只需将这些按钮集中对齐即可

有什么想法吗

---

非常感谢：）

您不必使用具有固定宽度和自动边距的包装div…只需使用

文本对齐：居中在容器div上

您不必使用具有固定宽度和自动边距的包装div…只需使用
文本对齐：居中在容器div上


按钮是内联元素，因此这将起作用


按钮是内联元素，因此这将起作用

有些人认为这是一种不好的做法，我想你必须小心，但你可以使用：


（躲在角落里）不要否决我的建议。有人说这是不好的做法，我想你一定要小心，但你可以使用：


（躲在角落里）不要拒绝我的建议，投票让我忘记

text-align: center;