1、html中讓一個(gè)DIV在另一個(gè)DIV中水平垂直居中，可以通過將一個(gè)div包裹第二個(gè)div，然后在將設(shè)置第一個(gè)div的寬高，要比第二大上很多，然后在設(shè)置第二個(gè)的寬高，然后通過marginauto auto這里我提交代碼lthtml lthead lttitle文字測試lttitle ltstyle test width800pxheight400pxborder；我們在設(shè)計(jì)頁面的時(shí)候，經(jīng)常要把DIV居中顯示，而且是相對頁面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示到現(xiàn)在為止，探討了很多種方法HTMLltbody ltdiv class=quotmaxboxquot ltdiv class=quotminbox aligncenterquotltdiv ltdiv ltbody第一種 CSS絕對定位主要利用絕對定位，再用；1設(shè)置div的height和lineheight值設(shè)置為相同的數(shù)值，只需要一個(gè)div即可2設(shè)置父級div樣式的displaytable，并設(shè)置子div樣式的displaytablecellverticalalignmiddle，此時(shí)需要一個(gè)父級div和一個(gè)子級div3設(shè)置父級div樣式為displayboxboxpackcenterboxorientvertical，記得要在前面加。

2、然后我們在html的編輯窗口，編輯元素，使其中顯示若干文字，我是用的div標(biāo)簽進(jìn)行布局顯示的其在瀏覽器中的顯示效果如下圖所示，我們可以很清晰的看到，文字明顯的靠上靠左對齊接下來我們就需要為文字元素添加一定的對齊方式，首先我們讓其居中對齊，即使用textaligncenter使用之后在瀏覽器中進(jìn)行效果；而層的定位點(diǎn)，使用外補(bǔ)丁margin負(fù)值的方法負(fù)值的大小為層自身寬度高度除以二如一個(gè)層寬度是400，高度是300使用絕對定位距離上部與左部都設(shè)置成50%而margintop的值為－150marginleft的值為－200這樣我們就實(shí)現(xiàn)了層垂直居中于瀏覽器的樣式編寫div positionabsolute top50%；顧名思義，定位法是利用CSS定位屬性position對元素進(jìn)行定位的方法，也屬于模擬方法，不過它對IE的支持還是不錯(cuò)的 它的Html代碼為ltdiv id=quotboxquot ltdiv id=quotsubquot ltdiv id=quotcontentquot垂直居中l(wèi)tdiv ltdiv ltdiv 這段代碼比上一種方法中多出了一個(gè)名為sub的Div，它的作用是用來定位；1先說文字居中此處是垂直居中，關(guān)鍵代碼height105pxlineheight105px兩個(gè)值要相等ltdiv style=#39 height105pxlineheight105pxoverflowhiddenborder1px solid #FF0099#39 居中l(wèi)tdiv 2文字橫向居中，關(guān)鍵代碼textaligncenter ltdiv style=#39 height105pxlineheight105px；HTML CSS中實(shí)現(xiàn)DIV中的圖片水平垂直居中對齊的方法所謂的圖片水平垂直居中就是把圖片放在一個(gè)容器元素中容器大于圖片尺寸或是指定了大小的容器，并且圖片位居此容器正中間中間是指元素容器的正中間，而圖片不是以背景圖片backgroundimage形式展示，是以ltimg元素形式展示的如下圖所示1。

3、文本水平居中使用CSS的textalign屬性來水平居中文本將該屬性應(yīng)用于包含文本的HTML元素，如ltdiv或ltpltstylecentertext textalign centerltstyleltdiv class=quotcentertextquot這是居中的文本ltdiv文本垂直居中垂直居中文本通常需要更多的CSS樣式你可以使用CSS的display flex；2然后我們在html的編輯窗口，編輯元素，使其中顯示若干文字，我是用的div標(biāo)簽進(jìn)行布局顯示的3其在瀏覽器中的顯示效果如下圖所示，我們可以很清晰的看到，文字明顯的靠上靠左對齊4接下來我們就需要為文字元素添加一定的對齊方式，首先我們讓其居中對齊，即使用textaligncenter5使用之后在；如果是一段文字，父元素不限高，要垂直居中，可以采用padding20px 0如果是一段文字，父元素有固定的高，要垂直居中，可以采用 ltdiv style=quotheight400pxpositionrelativequot ltdiv style=quotpositionabsolutetop50%quot ltdiv style=quotpositionrelativetop50%quot asdfsdfasdfsdaltbr；CSS實(shí)現(xiàn)絕對定位元素的居中效果，有時(shí)候需要把一個(gè)元素進(jìn)行居中，在這里講解三種方法，各種方法有它的優(yōu)缺點(diǎn)1建立txt文檔，更改后綴名為html，如圖2右擊html文件，選擇用記事本打開，如圖3講解第一種div絕對定位水平垂直居中CSS3使用transform， transform中translate偏移的百分比值是相對于自身；如果圖片左浮動(dòng)并且quotdisplayinlinequot時(shí)，只要給圖片設(shè)置一個(gè)quottextaligncenterquot屬性，就解決了水平居中使用displaytablecell和設(shè)置了displayinlineblock的線合span，這樣就解決垂直居中HTML與CSS入門經(jīng)典是經(jīng)典暢銷圖書HTML與CSS入門經(jīng)典的最新版本，與過去的版本相同，本書采用直觀循序；可以使用“textalign”屬性讓文字水平居中，使用“l(fā)ingheight”屬性讓文字垂直居中1新建html文檔，在body標(biāo)簽中添加div標(biāo)簽并填寫一段文字，然后為這個(gè)div設(shè)置一些樣式2為div添加“textalign”屬性，屬性值為“center”，這時(shí)文字將會(huì)在框內(nèi)水平居中3為div添加“l(fā)ineheight”屬性，屬性值為。

4、演示文本”默認(rèn)位置為div盒子的左上方2這時(shí)給div標(biāo)簽添加上“textalign”屬性，屬性值為“center”，這時(shí)文字將會(huì)在div容器中水平居中3這時(shí)給div標(biāo)簽添加行高“l(fā)ingheight”屬性，屬性值為高度的值“100px”，再添加“verticalalign”屬性，屬性值為“middle”，這時(shí)文字將會(huì)水平垂直都居中；#F00width400pxverticalalignmiddlelineheight200px ltstyle lthead ltbody ltdiv id=quotcenterquotltptest contentltpltdiv ltbody lthtml 說明verticalalignmiddle表示行內(nèi)垂直居中，我們將行距增加到和整個(gè)DIV一樣高lineheight200px然后插入文字，就垂直居中了。