CSS總結div中的內容垂直居中的六種方法

2021-09-11 17:21:00 字數 1491 閱讀 4225

目錄

行高（line-height）法

內邊距（padding）法

模擬**法

css3的transform來實現

css3的box方法實現水平垂直居中

flex布局

一、 行高（line-height）法

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

p
這段**可以達到讓文字在段落中垂直居中的效果。

二、內邊距（padding）法

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

p
這段**的效果和line-height法差不多。

三、模擬**法

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

html結構如下：

>


"cell"


>


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


/p>


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


/p>


<


/div>


<


/div>
css**：

#cell

四、css3的transform來實現

css**如下：

.center-vertical


.center-horizontal
五、css3的box方法實現水平垂直居中

html**：

"center"


>


"text"


>


我是多行文字<


/p>


我是多行文字<


/p>


我是多行文字<


/p>


<


/div>


<


/div>
css**：

.center
六、flex布局

html**：

"flex"


>


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


/p>


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


/p>


<


/div>


<


/div>
css**：

.flex

css中vertical align垂直居中的認識

目標大綱 1.vertical align為何不起作用？vertical align只鍾情於 inline block內聯塊級元素 inline元素 vertical align屬性 text bottom是與父標籤的文字底部對齊 效果栗子 我是一段文字.2.如何消除下面的間隙是如何出現的？源 1 ...

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

文章目錄 一 行高 line height 法 二 內邊距 padding 法 三 模擬 法 四 css3的transform來實現 五 css3的box方法實現水平垂直居中 六 flex布局 2018 04 17補充 一 行高 line height 法 如果要垂直居中的只有一行或幾個文字，那它的...

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

文章目錄 如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如 p 這段 可以達到讓文字在段落中垂直居中的效果。另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，比如 p 這段 的效果和line hei...