CSS垂直居中方法

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),雙清企業(yè)網(wǎng)站建設(shè),雙清品牌網(wǎng)站建設(shè),網(wǎng)站定制,雙清網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,雙清網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

w3c指定盒子模型（標(biāo)準(zhǔn)模型）

首先，水平居中很簡單：margin: 0 auto

垂直居中：

方法一：使用相對定位和 margin-top 屬性對元素進(jìn)行垂直居中

由于div元素的祖先元素html和body的高度默認(rèn)是為0的，所以需要設(shè)置為100%，并且清除默認(rèn)樣式，即把margin和padding設(shè)置為0，如果不清除默認(rèn)樣式的話，瀏覽器就會(huì)出現(xiàn)滾動(dòng)條。

top屬性可以使元素向下偏移。但默認(rèn)情況下，由于position的值為static（靜止的、不可以移動(dòng)的），元素在文檔流里是從上往下、從左到右緊密的布局的，我們不可以直接通過top、left等屬性改變它的偏移。所以，想要移動(dòng)元素的位置，就要把position設(shè)置為不是static的其他值，如relative,absolute,fixed等。（注意，relative是不會(huì)使元素脫離文檔流的，absolute和fixed則會(huì)！也就是說，relative會(huì)占據(jù)著移動(dòng)之前的位置，但是absolute和fixed就不會(huì)）。

注：這個(gè)方法兼容性不錯(cuò)，但是有一個(gè)小缺點(diǎn)：必須提前知道被居中塊級元素的尺寸，否則無法準(zhǔn)確實(shí)現(xiàn)垂直居中。

方法二：使用 transform 屬性

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

注：這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因?yàn)閠ransform中偏移的百分比就是相對于元素自身的尺寸而言，當(dāng)被居中的元素是被自己內(nèi)部元素?fù)伍_寬或者高的時(shí)候可適用此方法。

方法三：絕對定位結(jié)合 margin:auto

這種方式的兩個(gè)核心是：把要垂直居中的元素相對于父元素絕對定位，top、bottom、left、right設(shè)置為0。再將要居中的元素的margin設(shè)為auto，這樣就可以實(shí)現(xiàn)垂直居中了。
新聞名稱：CSS垂直居中方法
當(dāng)前URL：http://weahome.cn/article/dsojegi.html