CSS實現(xiàn)水平居中是網(wǎng)頁布局中常見操作之一。下面介紹幾種常見實現(xiàn)方法:
1. margin:使用margin屬性實現(xiàn)水平居中。具體用法如下:
/* 設(shè)置寬度和左右margin均為auto */ .center { width: 200px; margin: 0 auto; }
2. text-align:使用text-align屬性實現(xiàn)內(nèi)部文本內(nèi)容水平居中。具體用法如下:
/* 將text-align值設(shè)為center */ .center { text-align: center; }
3. display:使用display屬性實現(xiàn)行內(nèi)元素的水平居中。具體用法如下:
/* 將display值設(shè)為inline-block */ .center { display: inline-block; text-align: center; } .parent { text-align: center; }
4. flexbox:使用flexbox實現(xiàn)元素水平和垂直居中。具體用法如下:
/* 設(shè)置flexbox屬性 */ .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
總結(jié):實現(xiàn)水平居中的方法各有特點,可以根據(jù)具體情況選擇合適的方法。