在html css 垂直居中（一） 中介紹了《css 揭秘》 中的垂直居中的方法，很顯然在很多情況下是可以解決的，也是最好的解決方案，但是在某些特定的情況下還是要根據具體的情況而選擇合適的方法，這篇同樣介紹了一些垂直居中的方法，分享於大家兵記錄。
line-height
line-heigth 屬性是針對：父元素高度確定的單行文字（內聯元素）
//html
class="parent">
class="child">
div>
div>
//css
.child
style>
table-cell
父元素高度確定的多行文字（內聯元素）
.parent
.child
偽元素
為乙個元素新增為元素，相當於為當前元素新增了子元素，因此為了生成乙個 100% 高度的偽元素，我們需要對父元素新增偽元素
.parent
.parent
::before
.child
transform
使用 transform 可以用 translatey(-50%) 來達到 - height/2 的目的，而不需要知道居中元素的高度。
//html
class="container">
class="vertical">
transform 實現垂直居中
p>
div>
div>
//css
.container
.vertical
style>
最終我們還是要用flexbox，在前面一篇文章中也提到了flexbox，在此提到加深記憶。
//html
class="container">
id="p1">flexbox 垂直居中111 p>
id="p2">flexbox 垂直居中222p>
div>
//css
.container
pstyle>
html css垂直居中
第一種方式 flex 第二種方式 position margin 1.父元素設定position為relative 2.子元素設定position為absolute,並把top設定為50 最後margin上為負的子元素高度的一半 第三種方式position transform 與position m...
中有哪些方法可以實現垂直居中（二）
這裡是修真院前端小課堂，每篇分享文從 css中有哪些方法可以實現垂直居中 二 2.知識剖析 垂直居中就是豎向居中 下面我們一起來討論一下實現垂直居中的方法。3.常見問題 css有哪些方式可以實現垂直居中 4.解決方案 1 單行文字垂直居中方法 該方式適用於情況比較簡單的單行文字，只需要簡單地把 li...
html css實現文字水平垂直居中顯示
這幾天在工作中遇到了乙個小問題 文字內容怎麼能在div裡水平垂直居中顯示呢？同時群裡的小夥伴恰巧也有提問這個問題的，所以我就總結了一下我知道的方法。一 利用行高 line height 和vertical align配合實現 具體做法如下 html 測試文字 css box box span 這個地...