如何用html代碼實(shí)現(xiàn)網(wǎng)頁(yè)上下居中？1其原理很簡(jiǎn)單，就是把塊級(jí)元素變成行內(nèi)元素，定義樣式verticalalignmiddle，讓其垂直居中這里面有兩個(gè)難點(diǎn)，怎樣把塊級(jí)元素變成行內(nèi)元素并可以定義大小，而且還要兼容要了解IElayout2打開HTML的編輯器找到需要居中的圖片或者文字在body里面，設(shè)置CSS樣式。

容器的居中顯示在網(wǎng)頁(yè)設(shè)計(jì)中是很常見的，居中顯示可以獲得視覺的焦點(diǎn)，是內(nèi)容更加突出，下面就簡(jiǎn)單的說明一下如何在HTML中通過樣式的控制來實(shí)現(xiàn) 01 最常見的一種，代碼示例如下圖，首先，取big一半像素大小賦給small層，通過margin 0 auto textalign center來實(shí)現(xiàn) 02 第二種方法，代碼示例如。

樣式中有個(gè)textalign，可以設(shè)置為center就可以居中了比如要展示的文字 另外，設(shè)置垂直方向的屬性，可以使用verticalalign，對(duì)應(yīng)的值有top，middle，bottom等。

一在html代碼頁(yè)面的body標(biāo)簽寫一個(gè)的標(biāo)簽，在里面寫內(nèi)容即可實(shí)現(xiàn)居中，如接下來使用的兩個(gè)方法的前提是你的html代碼鏈接上css代碼不然沒效果 二textalign center方法在html代碼頁(yè)面給某一個(gè)標(biāo)簽取一個(gè)名字，然后在css代碼給標(biāo)簽設(shè)置屬性 css效果圖三margin 0 auto 0auto左右的。

我們?cè)谶M(jìn)行Web前端代碼編輯時(shí)，經(jīng)常會(huì)遇到元素需要居中的問題，為此，特地總價(jià)了一下幾種讓元素居中的方法一水平居中textaligncenter 這個(gè)屬性在沒有浮動(dòng)的情況下，我們可以將塊級(jí)元素轉(zhuǎn)換為inlineinlineblock，然后其父元素加上textaligncenter屬性就可以將其居中如果是行內(nèi)元素比如。

滿屏現(xiàn)在大部分是1024*768，不過為了滿足800*600的用戶瀏覽需要，現(xiàn)在的網(wǎng)頁(yè)大部分做成了居中的，這樣在800*600下差不多是滿屏的，而在1024*768下是居中的，居中的網(wǎng)頁(yè)大小一般寬為760780像素，如果要使網(wǎng)頁(yè)居中，可在網(wǎng)頁(yè)代碼和之間加入即可。

1新建html頁(yè)面 首先打開visual studio軟件，然后新建一張HTML頁(yè)面，如下圖所示2main 然后創(chuàng)建一個(gè)div，名稱為main，隨便寫上一些文字，如下圖所示3居中對(duì)齊 然后對(duì)body主題設(shè)置樣式，代碼為body margin0 autowidth780px如下圖所示4預(yù)覽效果 在瀏覽器中的預(yù)覽效果如下圖所示。