如何将按钮水平居中对齐？附HTML/CSS代码及尝试方案

你的问题出在没有对按钮的直接父容器.col-lg-6设置居中规则，之前的flex属性加在.about或.container-about上，只会让它们的直接子元素居中，无法影响到嵌套更深的按钮。下面提供两种简单可行的解决方法：

方法一：文本居中（适合行内/行内块元素） #

给按钮的直接父容器.col-lg-6添加text-align: center，因为按钮属于行内块元素，父级的文本居中规则会生效：

.about {
    display: flex;
    justify-content: center;
}

.col-lg-6 {
    text-align: center; /* 新增这行，让按钮水平居中 */
}

.about button {
    font-size: 22px;
    padding: 10px 20px;
    background-color: #0d0d0d;
    color: #fff;
    border: 2px solid #0d0d0d;
    border-radius: 0px;
    text-transform: uppercase;
    transition: all 0.2s linear;
    transition: all 0.9s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-shadow: 0.5px 0px 0.5px #000;
}

方法二：Flex布局（更灵活的现代方案） #

给.col-lg-6设置flex布局，通过align-items: center实现子元素水平居中，同时保持内容垂直排列：

.about {
    display: flex;
    justify-content: center;
}

.col-lg-6 {
    display: flex;
    flex-direction: column; /* 保持标题、段落、按钮垂直排列 */
    align-items: center; /* 让所有子元素水平居中 */
    /* 若只想让按钮单独居中，可移除上面两行，直接给按钮加 margin: 0 auto; */
}

.about button {
    font-size: 22px;
    padding: 10px 20px;
    background-color: #0d0d0d;
    color: #fff;
    border: 2px solid #0d0d0d;
    border-radius: 0px;
    text-transform: uppercase;
    transition: all 0.2s linear;
    transition: all 0.9s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-shadow: 0.5px 0px 0.5px #000;
}

补充说明 #

• 你原来的CSS代码中.about button的样式未闭合，记得补上最后的}。
• 若选择方法二中“单独让按钮居中”的方式，需保证.col-lg-6是块级元素（默认状态即为块级）。

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