div中的「內容」水平垂直居中

div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，

想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果

.demo this is a test of margin this is a test of margin this is a test of margin this is a test of margin this is a test of margin

（1）內容只有一行

設定div的line-height和div的高度一樣即可，這個大家都知道噠

（2）內容不確定有幾行

這時候需要在div中再加一層結構，用p標籤或者div都可以

*方法一：

.demo pthis is a test of margin this is a test of margin this is a test of margin this is a test of margin

*方法二：若是不想用position：absolute這樣的脫離文件流的樣式，那就可以嘗試模擬**的方法設定父元素display：table，設定子元素display：table-cell，並設定vertical-align：middle即可

.demo pthis is a test of margin this is a test of margin this is a test of margin this is a test of margin

此時子元素設定寬度是沒用的，寬度始終和父元素一致；

但是如果子元素設定高度的話，若是高度小於父元素則無效果，若是高度大於父元素則父元素的高度也相應增加到和子元素一樣的高度

*方法三：使用css3新增的flex布局完成，設定父元素display:box; box-pack:center; box-orient:vertical;即可，記得要在前面加上瀏覽器字首哦

.box this is a test this is a test this is a test this is another test for the second div