div中內容水平垂直居中

1. div高度自適應的情況

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

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

css**如下：

.demo

<

div 
class
="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         
div>

2.div設定具體高度

（1）內容只有一行

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

（2）內容不確定有幾行

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

方法一：

css**如下：

.demop

<

div 
class
="demo"
>
<
p>
this is a test of margin 
this is a test of margin 
this is a test of margin 
this is a test of margin  
p>
div>

方法二：若是不想用position：absolute這樣的脫離文件流的樣式，那就可以嘗試模擬**的方法

設定父元素display：table，設定子元素display：table-cell，並設定vertical-align：middle即可

css**如下：

.demop

<

div 
class
="demo"
>
<
p>
this is a test of margin 
this is a test of margin 
this is a test of margin 
this is a test of margin  
p>
div>

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

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

方法三：

使用css3新增的flex布局完成。

設定父元素display:box;  box-pack:center;  box-orient:vertical;即可，記得要在前面加上瀏覽器字首哦

css**如下：

.box

<

div 
class
="box"
>
<
div>
this is a test
this is a test
this is a test
div>
<
div>
this is another test for the second div    
div>
div>

div 中的內容水平垂直居中

要讓div中的元素垂直居中，只需要設定div容器的line height和height一致即可。再通過設定text align center 達到水平居中。content style class content p要垂直居中顯示p div body 將div容器設定為display table 然後...

div中的內容水平垂直居中

1.div高度自適應的情況 div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果 css 如下 demohtml 如下 ...

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

div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果 demo this is a test of margin thi...