在web设计中,我们不可避免地会用到按钮的样式来美化网页。然而,有时候我们会发现一个问题,就是我们的按钮并没有居中对齐。本文将介绍一些CSS技巧来让你的div按钮居中显示!
.btn { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
以上代码将设置一个名为“.btn”的样式,它的子元素会在水平和垂直方向上都居中对齐。这个技巧非常适用于单个按钮。
.container { display: flex; justify-content: center; } .btn { margin: auto; /* 水平垂直居中 */ }
如果你的页面有多个按钮,你可以把它们包括在一个容器内,然后给容器设置水平居中的样式,而子元素的居中显示则通过给自己设置margin为auto来实现。