lthtmlltheadltstylehtml，bodytextaligncentermargin0px autoltstyleltheadltbodyltform action=quot#quot method=quotpostquotltspan賬號(hào)ltspanltinput id=quotinput_textquot type=quottextquotltbrltbrltspan密碼lt；2寫一個(gè)div出來，同時(shí)在內(nèi)部加上一些文字，使用css增加屬性，使得div的區(qū)域看得清楚3接下來就使用textalign的center屬性將文字橫向居中，同時(shí)設(shè)置行高，使這行文字實(shí)際占用的高度和div高度相同，就產(chǎn)生了居中效果4。

利用圖片的margin屬性將圖片水平居中，利用DIV的padding屬性將圖片垂直居中結(jié)構(gòu)代碼同上CSS代碼如下div width300px height150px backgroundcolor#eee paddingtop50px border#000 1px solid img；利用行業(yè)元素SPAN和CSS樣式的display block去解決問題行業(yè)元素是不能設(shè)置高寬的，所以得先display blockdiv布局未添加樣式的效果3添加CSS樣式4最終實(shí)現(xiàn)的效果圖。

如果垂直居中的元素高度已知，這個(gè)比較簡單，也不需要額外的輔助元素 參考下列HTML代碼lt！DOCTYPE HTML lthtml lthead ltmeta；備注這里DIV的寬高計(jì)算都遵循盒模型原理，計(jì)算方法同上方法三思路利用圖片的margin屬性將圖片水平居中，利用DIV的padding屬性將圖片垂直居中結(jié)構(gòu)代碼同上CSS代碼如下div width300px height150px background。

div中的div垂直居中

4使用 positionabsolute，有固定寬度和高度的 div這個(gè) div被設(shè)置為 top0 bottom0但是因?yàn)樗泄潭ǜ叨?，其?shí)并不能和上下都間距為 0，因此 marginauto 會(huì)使它居中使用 marginauto使塊級(jí)元素垂直居中。

代碼如下2如果是多行文字，上面的垂直居中的方法就不行了，得用變通的方法實(shí)現(xiàn)這里建議使用table方法，在table外面再套上相應(yīng)的div代碼如下lttable lttr lttd style=quotverticalalignmiddleheight300pxback。

方法一使用絕對(duì)布局位置absolutefordiv并設(shè)置topleftrightbottom的值相等，但不一定都等于0并設(shè)置邊距自動(dòng)方法二這個(gè)方法需要知道div的寬度和高度使用絕對(duì)布局位置絕對(duì)用于div并將top和left的值設(shè)置為50%50。

4講解第二種div絕對(duì)定位水平垂直居中marginauto實(shí)現(xiàn)絕對(duì)定位元素的居中，代碼兩個(gè)關(guān)鍵點(diǎn)1上下左右均0位置定位2margin auto 其widthheight如何更改都是居中顯示的，兼容性可以，IE7及之前版本不支持，如圖5。

2html代碼ltdiv class=quottablequot ltdiv class=quotcellquotHello， I#39m in the middleltdivltdiv 3完整代碼及運(yùn)行結(jié)果lthtml lthead lttitle通過百分比控制文字垂直居中l(wèi)ttitle ltstyle type=quottextcssquot。

1如果是單行文字想垂直居中，只要保證div高和行高保持一致，就可以了用下面的代碼即可實(shí)現(xiàn)代碼如下2如果是多行文字，上面的垂直居中的方法就不行了，得用變通的方法實(shí)現(xiàn)這里建議使用table方法，在table外面再套上。

div 內(nèi)容垂直居中

這樣我們就實(shí)現(xiàn)了層垂直居中于瀏覽器的樣式編寫 注上面的是一般用于垂直居中與瀏覽器，想解決div垂直居中與外層div的話，只需要給外層div加上positionrelative就好了記住，外層div要設(shè)定高度和寬度。

參照以上Html代碼，讓最外面名為box的Div呈表格樣式顯示，然后再讓box中名為content的Div呈單元格顯示，并利用verticalalignmiddle讓其垂直居中，這樣就模擬出來和表格一樣的顯示方式，CSS代碼如下wrap height400px。

1第一種css代碼如圖所示display設(shè)置成tablecell，textalign為center，垂直居中設(shè)置verticalalign為middle2打開瀏覽器查看結(jié)果，圖片已處于正中狀態(tài)3第二種方法css代碼如圖div設(shè)置成相對(duì)定位，img設(shè)置成絕對(duì)定位。