站長資訊網(wǎng)css設(shè)置水平居中的方法：1、使用“text-align: center;”樣式，可對塊級元素（父元素）中的行內(nèi)元素進(jìn)行水平居中；2、使用“margin: 0 auto;”樣式，可對塊級元素（父元素）中具有固定寬度的塊級元素進(jìn)行水平居中。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
方法1：使用text-align屬性
直接給父元素設(shè)置 text-align: center;樣式，可以將塊級元素（父元素）中的行內(nèi)元素進(jìn)行水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #father { width: 300px; height: 100px; background: palevioletred; text-align: center; } </style> <div id="father"> 我是測試文本！ </div> </html>
效果圖：
說明：
該種方法僅對文字、圖片、按鈕等行內(nèi)元素有效（display屬性設(shè)置為inline或inline-block的）進(jìn)行水平居中
（學(xué)習(xí)視頻分享：css視頻教程）
方法2：使用margin屬性
給需要居中的子元素設(shè)置margin: 0 auto; 樣式，可以將塊級元素（父元素）中具有固定寬度的塊級元素進(jìn)行水平居中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #father { width: 300px; height: 100px; background-color: palevioletred; } #son { width: 100px; height: 50px; background-color: pink; margin: 0 auto; } </style> <div id="father"> <div id="son">我是塊級元素</div> </div> </html>
效果圖：
說明：
該方法僅能水平居中，且對浮動元素定位無效。
