尝试Flexbox与Margin仍无法居中按钮，求代码优化方法

方案一：margin: auto 实现水平居中 #

你原来的代码存在两个关键问题导致margin方法失效：

1. margin: auto 0 仅设置了上下自动分配空间，左右边距为0，无法触发水平居中
2. .button 固定的width: 500px与.button.center的width: 50%冲突，导致样式优先级混乱

修改后的CSS代码：

body {
    background-color: dimgray;
    font-family: Arial, Helvetica, sans-serif;
}

.button {
    width: 500px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 70px;
    border: 3px solid black;
    padding: 10px;
    /* 核心：左右边距设为auto，确保元素为块级 */
    display: block;
    margin: 0 auto;
}

#squawk {
    color: white;
    padding: 50px;
    text-align: center;
    font-size: 50px;
}

调整后按钮会在页面水平居中，同时保留你设置的固定宽高和样式。

方案二：Flexbox 布局（支持灵活居中） #

如果需要更适配不同场景的布局（比如同时实现垂直+水平居中），Flexbox是更优选择，只需给父元素（body）添加Flex属性：

修改后的CSS代码：

body {
    background-color: dimgray;
    font-family: Arial, Helvetica, sans-serif;
    /* 开启Flex布局 */
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
    min-height: 100vh; /* 让body占满视口高度，为垂直居中提供基础 */
    margin: 0; /* 清除body默认边距 */
}

.button {
    width: 500px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 70px;
    border: 3px solid black;
    padding: 10px;
    margin-top: 20px; /* 调整与上方文本的间距 */
}

#squawk {
    color: white;
    padding: 50px;
    text-align: center;
    font-size: 50px;
}

若需要按钮在页面垂直居中，只需给body追加一行 justify-content: center;，不过这会让上方的squawk元素也同步垂直居中，可根据需求调整。

内容的提问来源于stack exchange，提问作者mel.pear