如何使用 CSS 将表单中的提交按钮居中对齐

来源：站长素材作者：北京网站建设头衔：草根站长

导读：本期聚焦于小伙伴创作的《如何使用 CSS 将表单中的提交按钮居中对齐》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何使用 CSS 将表单中的提交按钮居中对齐》有用，将其分享出去将是对创作者最好的鼓励。

在网页表单开发中，提交按钮的对齐是提升页面美观度和用户体验的重要细节，将提交按钮居中对齐是很多场景下的常见需求，下面介绍几种常用的CSS实现方法。

方法一：使用text-align属性实现

如果提交按钮的父元素是块级元素，且按钮本身是行内元素或者行内块元素，可以直接给父元素设置text-align:center属性，让内部的行内内容居中对齐。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .form-container {
            text-align: center;
            padding: 20px;
            border: 1px solid #eee;
        }
        .submit-btn {
            padding: 8px 20px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form class="form-container">
        <input type="text" placeholder="请输入内容">
        <br><br>
        <button type="submit" class="submit-btn">提交</button>
    </form>
</body>
</html>

这种方法的优点是兼容性好，几乎支持所有浏览器，缺点是只能作用于行内或行内块元素，如果父元素有其他块级子元素，也会被一起居中对齐。

方法二：使用flex布局实现

flex布局是目前前端开发中最常用的布局方式之一，通过设置父元素为flex容器，可以轻松控制子元素的对齐方式，实现提交按钮居中对齐。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .form-container {
            display: flex;
            justify-content: center;
            padding: 20px;
            border: 1px solid #eee;
        }
        .submit-btn {
            padding: 8px 20px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form class="form-container">
        <input type="text" placeholder="请输入内容">
        <button type="submit" class="submit-btn">提交</button>
    </form>
</body>
</html>

如果需要垂直方向也居中，可以额外添加align-items:center属性。flex布局的灵活性很高，适合复杂的表单布局场景，不过需要注意IE10及以下版本浏览器不支持该属性。

方法三：使用grid布局实现

grid布局是二维布局方案，同样可以实现提交按钮的居中对齐，适合需要同时控制行和列对齐的场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .form-container {
            display: grid;
            justify-content: center;
            padding: 20px;
            border: 1px solid #eee;
        }
        .submit-btn {
            padding: 8px 20px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form class="form-container">
        <input type="text" placeholder="请输入内容">
        <button type="submit" class="submit-btn">提交</button>
    </form>
</body>
</html>

grid布局的对齐属性更丰富，如果需要垂直居中可以配合align-content:center使用，不过它的浏览器兼容性比flex布局稍差，在旧版本浏览器中需要添加前缀。

方法四：使用margin自动外边距实现

如果提交按钮是块级元素，或者手动将其设置为块级元素，可以通过设置左右外边距为自动的方式实现水平居中对齐。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .form-container {
            padding: 20px;
            border: 1px solid #eee;
        }
        .submit-btn {
            display: block;
            margin: 0 auto;
            padding: 8px 20px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form class="form-container">
        <input type="text" placeholder="请输入内容">
        <br><br>
        <button type="submit" class="submit-btn">提交</button>
    </form>
</body>
</html>

这种方法只针对当前按钮元素生效，不会影响父容器内的其他元素，适合只需要单独对齐提交按钮的场景，兼容性也比较好。

不同方法的适用场景对比

实现方法	适用场景	兼容性
text-align属性	父容器内只有行内/行内块元素，需要整体居中的场景	非常好，全浏览器支持
flex布局	复杂表单布局，需要灵活控制子元素对齐的场景	较好，IE11及以上支持
grid布局	二维布局需求，需要同时控制行列对齐的场景	一般，旧版本浏览器需要前缀
margin自动外边距	单独对齐提交按钮，不影响其他元素的场景	非常好，全浏览器支持

在实际开发中，可以根据表单的具体结构和浏览器兼容要求选择合适的方法，大部分场景下flex布局和text-align属性就能满足需求。

CSS 表单提交按钮居中对齐 text_align flex布局修改时间：2026-07-22 19:27:31

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。