設定垂直居中的幾種方法
自己知道的不多，所以去網上搜了幾種辦法，以後了解到了還會繼續補充：
（1）table-cell
將div的顯示方式設定為**，利用**的vertical-align:middle屬性：
clss
=>
class
="cell"
>
>
垂直居中div
>
div>
div>
>
.cell
style
>
話不多說直接上圖看看效果：
（2）display: flex
>
style
>
class
=>
class
="content"
>
垂直居中div
>
div>
display: flex:是一種布局方式，既適用於塊級元素，也適用於行級元素，flex意為「彈性布局」，設定後子元素的float,vertical-align,clear屬性將失效。
justify-content:內容對齊，應用在彈性容器上，將彈性容器內的內容按照主軸線對齊:
justify-content: flex-start / flex-end / center / space-between / space-around
align-items:設定了flex容器的對齊方式。
（3）margin:auto和top,left,right,bottom都設定為0
>
.content
style
>
class
="content"
>
div>
（4）transform:translate(-50%,-50%)
往上移動自己寬度的50%，往左移動自身長度的50%
>
.content
style
>
class
="content"
>
垂直居中div
>
與用margin-left和margin-top居中進行比較:
margin需要知道自身的寬高，而translate是相對於自身寬高的百分比而言，所以不需要知道自身的寬高。
（5）子絕父相
這個是個人之前在用的笨辦法，子元素用絕對定位，父級元素用相對定位，可以按照笨辦法一點一點挪過去，這裡提及一下，草草用個**解決一下就行了。
>
.father
.son
style
>
class
="father"
>
class
="son"
>
垂直居中div
>
div>
（6）display:inline-block
在網上有看到大佬這樣寫，自己嘗試了一下，還真成了，學到了學到了
>
.box
.box span
.box:after
style
>
class
="box"
>
>
垂直居中span
>
div>
（7）line-height
這個也是我自己在用的方法，將行高設定和塊級元素一樣高就可
>
.box
style
>
class
="box"
>
>
垂直居中span
>
div>
css垂直居中的幾種方法
1.lineheight方法 html class container id div1 src test.png 一行文字span div css container div1 div1 img效果 說明 設定了lineheight和容器高度相同，vertical align middle 需要知道...
文字垂直居中的幾種方法
3 如果上面的 都不生效的話，有可能行內元素是在 裡面，這個時候可以利用inline元素的 css 屬性 vertical align 預設是 baseline 屬性，將其設定為 middle，這個屬性常用於 inline level 和 table cell 的元素。水平垂直居中 拓展 在垂直居中...
CSS垂直居中的幾種方法
對於乙個前端開發人員，元素居中在布局中相當常見，水平居中實現非常非常容易，如果是行內元素，設定text align center就行，如果是塊級元素，通過設定邊距margin auto可實現水平居中。垂直居中實現起來相對較為較為麻煩，不囉嗦，直接上乾貨。主要有下面幾種方法 1 絕對定位方法 id m...