div标签里的按钮垂直居中
时间: 2023-07-17 17:01:42 浏览: 176
CSS 将两个button按钮垂直+水平居中
要在 `<div>` 标签中将按钮垂直居中,可以使用 Flexbox 布局。请将按钮包裹在一个 `<div>` 标签内,并为该 `<div>` 标签添加以下 CSS 样式:
```css
<div style="display: flex; justify-content: center; align-items: center; height: 100%">
<button class="btn btn-primary">按钮</button>
</div>
```
这样,按钮将会在 `<div>` 内垂直居中显示。通过设置 `display: flex`,将 `<div>` 定义为弹性容器,`justify-content: center` 将按钮水平居中,`align-items: center` 将按钮垂直居中。通过设置 `<div>` 的高度为 `100%`,确保高度与父元素相同,以实现垂直居中效果。你可以根据实际情况调整样式和按钮的其他属性。
阅读全文