在做網(wǎng)頁編程的過程中，div是比較常用的網(wǎng)頁分塊單元，再結(jié)合css，就可以讓div有不同的網(wǎng)頁展現(xiàn)效果，而div上下居中顯示也是最常用的一種方式，在一般的網(wǎng)頁里面，如果是做重要的分塊的話，就是需要使用div來做的，這樣比較容易讓用戶看到，而且布局也是很對稱的，那么div上下居中的方法是怎樣的？不固定高寬div垂直居中的方法有哪些呢？下面就詳細(xì)的來說說關(guān)于div的問題。
div上下居中的操作方法
1.div是什么 div是html中用來將網(wǎng)頁內(nèi)容結(jié)構(gòu)進(jìn)行劃分及提供背景的重要角色，也稱為層，寫法是，用id或class對div進(jìn)行標(biāo)記可以為單個(gè)div提供更獨(dú)特的樣式。
2. 絕對定位 這是div居中展示的最簡單方式，div有了固定長寬后，將div的上下左右的坐標(biāo)都設(shè)置為0，然后margin設(shè)置為auto，div即會(huì)居中展示。
3.表格居中 表格是網(wǎng)頁中展示數(shù)據(jù)的一種常見方式，我們也可以利用表格的概念來在div外套兩層div，形成一個(gè)表格，使div上下左右居中，使用vertical-align兩個(gè)屬性將div居中。
4.設(shè)置margin負(fù)值 利用position 定位后，再使用margin負(fù)值，將div居中對齊，不過此方法兼容性較差，需要準(zhǔn)確的margin負(fù)值。
5.transform方式 當(dāng)對于要設(shè)置的div長寬不確定時(shí)，使用transform進(jìn)行居中，會(huì)方便很多，transform即是變形使用他的translate屬性，使div可以左右居中。
不固定高寬div垂直居中的方法
方法一：
用一個(gè)“ghost”偽元素（看不見的偽元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是這個(gè)方法要求待居中的元素是 inline-block，不是一個(gè)真正通用的方案。
方法二：
可以用table布局方法，但是這種方法也有局限性！
方法三，終極解決方法：
以上2中方法可能都有其局限性，我介紹的第三中方法是比較成熟的不是固定高寬div的垂直居中的方法！但是方法是css3的寫法，想兼容ie8的童鞋們，建議用上面的方法！
css總結(jié)div中的內(nèi)容垂直居中的方法
一、行高（line-height）法
如果要垂直居中的只有一行或幾個(gè)文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達(dá)到讓文字在段落中垂直居中的效果。
二、內(nèi)邊距（padding）法
另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內(nèi)容垂直居中，比如：
p { padding:20px 0; }
這段代碼的效果和line-height法差不多。
三、模擬表格法
將容器設(shè)置為display:table，然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell，然后加上vertical-align:middle來實(shí)現(xiàn)。
div上下居中方法是怎樣的？以上就給朋友們詳細(xì)的介紹了關(guān)于div上下居中的操作方法的問題，大家在做div上下居中操作的時(shí)候，就可以參考上面的步驟去做了，對于div中的內(nèi)容垂直居中的方法，大家也要了解一下，這些知識對于更好的設(shè)計(jì)網(wǎng)頁具有非常重要的作用，如有疑問，可以咨詢我們。