CSS 是前端開發(fā)人員必須學(xué)習(xí)的一項技術(shù)。在進(jìn)行網(wǎng)站布局時,經(jīng)常需要設(shè)置頁面中的按鈕垂直和水平居中。以下是一些方法,可以實現(xiàn) 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 中垂直和水平居中按鈕。開發(fā)人員可以根據(jù)需求選擇最佳方式。