在頁面布局時(shí)經(jīng)常會(huì)將網(wǎng)頁的主體部分居中在頁面上，這就需要我們實(shí)現(xiàn)div水平居中，接下來將在文章中為大家具體介紹如何使得div居中在頁面中，具有一定的參考價(jià)值，希望對大家有所幫助

【推薦課程：HTML教程】

margin方法

可以通過margin來使得div居中，通過給margin-left設(shè)置的值為父元素的寬減去子元素的寬再除以2（本例中：（400-100）/2=150px），margin-top的值為父元素的高度減去子元素的高度值再除以2（本例中:（300-100）/2=100px）

例：

 style .box{width:400px;height: 300px;border: 1px solid #ccc;.box1{width:100px;height: 100px;background-color: pink;margin-left: 150px;margin-top:100px; /style  /head  body  div  div /div  /div  /body  /html 

效果圖：

position方法

可以通過定位的方法來使得div垂直居中，我們可以設(shè)置子元素絕對定位，另外設(shè)置top和left值為50%，但是需要注意一點(diǎn)在用定位是也要設(shè)置margin值，其中margin-left與margin-right的值都為負(fù)值，且值的大小是子元素寬高的一半

例：

 style  .box{ width:400px; height: 300px; border: 1px solid #ccc; position: relative; .box1{ width:100px; height: 100px; background-color: pink; position: absolute; top: 50%; left: 50%; margin:-50px 0 0 -50px  /style  /head  body  div >
效果圖：
本文參考：http://www.html.cn/doc/html/layout/ 
HTML標(biāo)簽索引：http://www.html.cn/sitemap.html
總結(jié)：以上就是本篇文章的全部內(nèi)容了，希望通過這篇文章可以幫助大家學(xué)會(huì)如何將div居中在頁面上
以上就是html中如何讓div居中的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。