div上下居中的方法是怎樣的？不固定高寬div垂直居中的方法有哪些？

  在做網(wǎng)頁編程的過程中，div是比較常用的網(wǎng)頁分塊單元，再結(jié)合css，就可以讓div有不同的網(wǎng)頁展現(xiàn)效果，而div上下居中顯示也是最常用的一種方式，在一般的網(wǎng)頁里面，如果是做重要的分塊的話，就是需要使用div來做的，這樣比較容易讓用戶看到，而且布局也是很對稱的，那么div上下居中的方法是怎樣的？不固定高寬div垂直居中的方法有哪些呢？下面新網(wǎng)就詳細(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)記可以為單個div提供更獨特的樣式。

  2. 絕對定位 這是div居中展示的最簡單方式，div有了固定長寬后，將div的上下左右的坐標(biāo)都設(shè)置為0，然后margin設(shè)置為auto，div即會居中展示。
  3.表格居中 表格是網(wǎng)頁中展示數(shù)據(jù)的一種常見方式，我們也可以利用表格的概念來在div外套兩層div，形成一個表格，使div上下左右居中，使用vertical-align兩個屬性將div居中。
  4.設(shè)置margin負(fù)值 利用position 定位后，再使用margin負(fù)值，將div居中對齊，不過此方法兼容性較差，需要準(zhǔn)確的margin負(fù)值。

  5.transform方式 當(dāng)對于要設(shè)置的div長寬不確定時，使用transform進(jìn)行居中，會方便很多，transform即是變形使用他的translate屬性，使div可以左右居中。

  不固定高寬div垂直居中的方法
  方法一：
  用一個“ghost”偽元素（看不見的偽元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是這個方法要求待居中的元素是 inline-block，不是一個真正通用的方案。
  方法二：
  可以用table布局方法，但是這種方法也有局限性！
  方法三，終極解決方法：
  以上2中方法可能都有其局限性，我介紹的第三中方法是比較成熟的不是固定高寬div的垂直居中的方法！但是方法是css3的寫法，想兼容IE8的童鞋們，建議用上面的方法！
 
  CSS總結(jié)div中的內(nèi)容垂直居中的方法
  一、行高（line-height）法
  如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：
  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來實現(xiàn)。

  div上下居中方法是怎樣的？以上就給朋友們詳細(xì)的介紹了關(guān)于div上下居中的操作方法的問題，大家在做div上下居中操作的時候，就可以參考上面的步驟去做了，對于div中的內(nèi)容垂直居中的方法，大家也要了解一下，這些知識對于更好的設(shè)計網(wǎng)頁具有非常重要的作用，如有疑問，可以咨詢新網(wǎng)。