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

  在做网页编程的过程中，div是比较常用的网页分块单元，再结合css，就可以让div有不同的网页展现效果，而div上下居中显示也是最常用的一种方式，在一般的网页里面，如果是做重要的分块的话，就是需要使用div来做的，这样比较容易让用户看到，而且布局也是很对称的，那么div上下居中的方法是怎样的？不固定高宽div垂直居中的方法有哪些呢？下面新网就详细的来说说关于div的问题。

  div上下居中的操作方法
  1.div是什么 div是html中用来将网页内容结构进行划分及提供背景的重要角色，也称为层，写法是，用id或class对div进行标记可以为单个div提供更独特的样式。

  2. 绝对定位 这是div居中展示的最简单方式，div有了固定长宽后，将div的上下左右的坐标都设置为0，然后margin设置为auto，div即会居中展示。
  3.表格居中 表格是网页中展示数据的一种常见方式，我们也可以利用表格的概念来在div外套两层div，形成一个表格，使div上下左右居中，使用vertical-align两个属性将div居中。
  4.设置margin负值 利用position 定位后，再使用margin负值，将div居中对齐，不过此方法兼容性较差，需要准确的margin负值。

  5.transform方式 当对于要设置的div长宽不确定时，使用transform进行居中，会方便很多，transform即是变形使用他的translate属性，使div可以左右居中。

  不固定高宽div垂直居中的方法
  方法一：
  用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
  方法二：
  可以用table布局方法，但是这种方法也有局限性！
  方法三，终极解决方法：
  以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！
 
  CSS总结div中的内容垂直居中的方法
  一、行高（line-height）法
  如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
  p { height:30px; line-height:30px; width:100px; overflow:hidden; }
  这段代码可以达到让文字在段落中垂直居中的效果。
  二、内边距（padding）法
  另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
  p { padding:20px 0; }
  这段代码的效果和line-height法差不多。
  三、模拟表格法

  将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

  div上下居中方法是怎样的？以上就给朋友们详细的介绍了关于div上下居中的操作方法的问题，大家在做div上下居中操作的时候，就可以参考上面的步骤去做了，对于div中的内容垂直居中的方法，大家也要了解一下，这些知识对于更好的设计网页具有非常重要的作用，如有疑问，可以咨询新网。