CSS 是前端开发人员必须学习的一项技术。在进行网站布局时,经常需要设置页面中的按钮垂直和水平居中。以下是一些方法,可以实现 CSS 中的按钮剧中。
/*方法一: 使用定位方法*/ .button { position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); } /*方法二: 使用 flexbox*/ .container { display: flex; justify-content: center; align-items: center; } .button { /*添加自己的样式*/ } /*方法三:使用表格布局*/ .table { display: table; height:100%; width:100%; } .row { display: table-row; } .cell { display:table-cell; vertical-align:middle; text-align:center; } .button { /*添加自己的样式*/ } /*方法四: 使用 Grid*/ .container { display: grid; justify-content:center; align-items:center; } .button { /*添加自己的样式*/ }
以上这些方法可以用来在 CSS 中垂直和水平居中按钮。开发人员可以根据需求选择最佳方式。
本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。
0