一行或者多行垂直居中问题

在实际开发中，咱们会遇到不少须要多行垂直居中的问题，今天空闲作个总结。

 

1.首先一行问题我就不用说了，给一个line-height通常都可以解决垂直居中的问题。

可是若是是下面这中格式那该如何处理呢？　

<div>
    <p>多行多行多行多行</p>
    
      <p>多行多行多行多行</p>
</div>
方法一：也是最重要的。虽然这个方法不兼容ie6 ie7　　　　　　　

给div一个父盒子

将父盒子的css设置为display：table。
子盒子display：table-cell vertical-align：middle text-align：center

　　

 方法二这个方法就是万能的了。代码就不上了。讲一下思路吧

首先仍是给最大的盒子display：table。利用表格垂直居中的属性。

其次给内容和子进行绝对定位。相关内容margin-left：-50%；

 

本人实践，没有问题。如对您有帮助，请支持一下。