一行或者多行垂直居中問題

在實際開發中，咱們會遇到不少須要多行垂直居中的問題，今天空閒作個總結。

 

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%；

 

本人實踐，沒有問題。如對您有幫助，請支持一下。