1首先打開(kāi)vscode編輯器，新建一個(gè)html文檔，里面寫(xiě)入一個(gè)外層的div，再加入一行table表格2然后在上方的style標(biāo)簽中加入css樣式，設(shè)置table標(biāo)簽的樣式，table的元素具有長(zhǎng)度自適應(yīng)性，其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定，只要設(shè)置margin屬性，讓左右設(shè)置為auto就回自動(dòng)分配剩余空間，也就是元素兩側(cè)的區(qū)域各占50。

需要準(zhǔn)備的材料分別有電腦瀏覽器html編輯器1首先，打開(kāi)html編輯器，新建html文件，例如indexhtml，填充問(wèn)題基礎(chǔ)代碼2在indexhtml中的ltstyle標(biāo)簽中，輸入css代碼table margin auto3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)table在div中成功居中顯示了。

在表格外面嵌套另一個(gè)高度為 100% 的表格，外層的表格設(shè)置 td 的 valign 屬性 為 middle lttable width=quot100%quot height=quot100%quot border=quot0quot cellspacing=quot0quot cellpadding=quot0quotlttrlttd align=quotcenterquot valign=quotmiddlequot lttablelttrlttdsdfsdfsflttdlttrlttable lttdlttrlt。

所以左右兩邊元素剩余區(qū)域各自均分，也就是元素兩側(cè)的區(qū)域各占50%，那么元素就左右居中了對(duì)于寬度不固定的塊級(jí)元素，通常有3種方式來(lái)實(shí)現(xiàn)居中第一種是通過(guò)table元素來(lái)實(shí)現(xiàn)第二種是設(shè)置display inline方法，將顯示類(lèi)型設(shè)為行內(nèi)元素第三種是設(shè)置positionrelative，利用相對(duì)定位的方式，將元素向左。

html垂直居中有4中方法分別有使用lineheight使用表格利用displaytablecell使用絕對(duì)定位具體實(shí)現(xiàn)方法使用lineheight 把文字的lineheight設(shè)為文字父容器的高度，適用于只有一行文字的情況可以讓文字在父元素內(nèi)垂直居中使用表格 在IE67中我們可以使用vertivalalignmiddle來(lái)對(duì)表格里的。