css flexbox实现按钮水平垂直居中_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-14

浏览次数：次

使用 Flexbox 居中按钮只需设置父容器 display: flex、justify-content: center 和 align-items: center，配合 height: 100vh 可实现全屏居中，适用于登录页等需居中布局的场景。

css flexbox实现按钮水平垂直居中

使用 CSS Flexbox 实现按钮的水平垂直居中非常简单，只需要将父容器设置为 flex 布局，并应用两个关键属性即可。

假设你的 HTML 结构如下：

给外层容器设置 Flexbox 样式，让按钮在其中水平和垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
}

说明：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

这种写法适合模态框、登录页、欢迎页等需要内容居中的界面。只要父容器有明确尺寸（如固定高度或全屏），按钮就能完美居中。

基本上就这些，不复杂但很实用。

以上就是css flexbox实现按钮水平垂直居中的详细内容，更多请关注其它相关文章！