HTML總結div中的內容垂直居中的五種方法

一、行高（line-height）法

如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：

p

另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，比如：

p

三、模擬**法

將容器設定為display:table，然後將子元素也就是要垂直居中顯示的元素設定為display:table-cell，然後加上vertical-align:middle來實現。

html結構如下：

測試垂直居中效果測試垂直居中效果

css**：

#cell

四、css3的transform來實現

.center-vertical.center-horizontal

我是多行文字

我是多行文字
我是多行文字

.center

html中div垂直居中

雖然div布局已經基本上取代了 布局，但 布局和div布局仍然各有千秋，互有長處。比如 布局中的垂直居中就是div布局的一大弱項，不過好在千變萬化的css可以靈活運用，可以製作出準垂直居中效果，勉強過關。要讓div中的內容垂直居中，無非有以下幾種方法，等我一一枚舉 一 行高 line height ...

div中內容水平垂直居中

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

關於div中內容垂直居中

今天做乙個專案，需要讓文字垂直居中，我已經習慣用div書寫，所以沒用 結果遇到了不大不小的問題。還好可以通過css來解決。現在把常見的幾種方法總結一下。如果要垂直居中的只有一行或幾個文字，只要讓文字的行高和容器的高度相同即可，比如 html head style type text css psty...