css 按钮居中

作者：嗜神魔影发布日期:2026-04-12 浏览:11

<!DOCTYPE html>
<html>
<head>
<style>
/* 使用 Flexbox 实现按钮居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度为视口高度 */
}

.button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
</head>
<body>

<div class="container">
  <button class="button">点击我</button>
</div>

</body>
</html>

解释说明：

.container 类使用了 display: flex，并通过 justify-content: center 和 align-items: center 实现了水平和垂直居中。
height: 100vh 设置容器的高度为视口的高度，确保按钮在页面的中心位置。
.button 类定义了按钮的样式，包括内边距、字体大小、背景颜色、文本颜色等。

上一篇：css锚点定位

下一篇：css自定义滚动条