這裡是修真院前端小課堂，每篇分享文從
css中有哪些方法可以實現垂直居中（二）
2.知識剖析
垂直居中就是豎向居中
下面我們一起來討論一下實現垂直居中的方法。
3.常見問題
css有哪些方式可以實現垂直居中
4.解決方案
1、單行文字垂直居中方法
該方式適用於情況比較簡單的單行文字，只需要簡單地把 line-height 設定為那個物件的 height 值就可以使文字居中。
2、多行未知高度文字的垂直居中
如果一段內容，它的高度是可變的那麼我們可以使用設定padding，使上下的padding值相同即可。同樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把div完全填充的一種方式而已。
3、多行文字固定高度的居中
vertical-align屬性只會對擁有valign特性的(x)html標籤起作用，但是在css中還有乙個display屬性能夠模擬table，所以我們可以使用這個屬性來讓div模擬table就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設定在父元素上，後者必須設定在子元素上，因此我們要為需要定位的文字再增加乙個div元素.
4、ie6中垂直居中
internet explorer 6 並不能正確地理解display:table和display:table-cell，因此我們可以使用定位來解決這個問題。
5、div垂直居中：margin：auto
父元素相對定位，子元素絕對定位。 子元素的上下左右均設定0定位且設定margin：auto
6、div垂直居中：css3的transform
css3的興起，使得垂直居中有了更好的解決方法，就是使用transform代替上一種方法margin. transform中translate偏移的百分比值是相對於自身大小的
7、div垂直居中：flex
給父元素設定display：flex後再設定align-items: center表示讓子元素垂直居中
8、使用writing-mode實現垂直居中
writing-mode是css3的新特性之一，使用場景不是很多。這個屬性主要是改變文件流的顯示方式。
5.編碼實戰
6.擴充套件思考
7.參考文獻
CSS中有哪些方法可以實現垂直居中？
幾種常用到的垂直居中方法 行內元素 單行 行內元素 1.一般用line height來實現垂直居中,用text ailgn實現水平居中 多行 行內元素 1.用 的vertical align來實現垂直居中 2.用flex彈性布局 塊級元素 1.通過padding實現垂直居中 2.flex布局實現垂直...
CSS中有哪些方法可以實現垂直居中（一）？
這裡是修真院前端小課堂，每篇分享文從 本篇分享的是 css中有哪些方法可以實現垂直居中？1 背景介紹 在前端開發過程中，對頁面進行布局時，除了css水平居中的需求外，還會經常遇到css垂直居中的需求，css垂直居中跟css水平居中一樣都是前端工程師的基本功。2 知識剖析 幾種常用到的垂直居中方法 1...
html css 垂直居中（二）
在html css 垂直居中 一 中介紹了 css 揭秘 中的垂直居中的方法，很顯然在很多情況下是可以解決的，也是最好的解決方案，但是在某些特定的情況下還是要根據具體的情況而選擇合適的方法，這篇同樣介紹了一些垂直居中的方法，分享於大家兵記錄。line height line heigth 屬性是針對...