站長(zhǎng)資訊網(wǎng)
方法：1、給div元素添加“display:flex”樣式，設(shè)置div元素為彈性布局樣式；2、給div元素添加“align-items:center;justify-content:center”樣式，設(shè)置div內(nèi)按鈕元素水平垂直居中即可。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css中按鈕怎么在div居中
我們可以通過display:flex;屬性將div元素設(shè)置為彈性布局，用來為div元素提供最大的靈活性。
align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。
justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; border:1px solid #000; display:flex; justify-content:center; align-items:center; } </style> </head> <body> <div><button>按鈕</button></div> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
