要讓div中的元素垂直居中，只需要設定div容器的line-height和height一致即可。再通過設定text-align: center;達到水平居中。
>
.content
style
>
>
class
="content"
>
>
p要垂直居中顯示p
>
div>
body
>
div容器設定為display:table;，然後將子元素也就是要垂直居中顯示的元素設定為display:table-cell;，然後加上vertical-align:middle;來實現。
>
.content
pstyle
>
class
="content"
>
>
p要垂直居中顯示p
>
div>
div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的。
>
.content
style
>
class
="content"
>
>
p要垂直居中顯示p
>
>
p要垂直居中顯示p
>
>
p要垂直居中顯示p
>
>
p要垂直居中顯示p
>
div>
其實這個方法的思路是這樣的：要讓元素居中就給他left50%好了。可是元素本身還有寬度，left50%之後元素的左邊位於頁面的中間而不是元素本身。所以再設定
transform: translatex(-50%);讓元素相對於自身偏移50%使得元素的中心位於外側容器中心就能達到水平居中的效果。
.content
p
div中內容水平垂直居中
1.div高度自適應的情況 div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果 css 如下 demohtml 如下 ...
div中的內容水平垂直居中
1.div高度自適應的情況 div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果 css 如下 demohtml 如下 ...
div中的「內容」水平垂直居中
div在不設定高度的時候，會被裡面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設定垂直居中，內容自動在中間的，想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果 demo this is a test of margin thi...