專案裡經常在元素排列時會需要垂直居中的情況，以下在使用場景和條件限制上總結部分常用的一些垂直居中方法。
將元素的height和line-height設定為相同的值即可;
利用display:table-cell賦予div類似於table等標籤的**布局特性,
.middle
複製**
css table布局-display:table
display:table-cell實現水平垂直居中
需要確定內部元素的高度才能生效：
position:relative;
}.middle
複製**
此方法相容所有瀏覽器
.list
li.btn
複製**
transform也可以實現垂直居中,此時子元素不需要設定高度也可以，但是不能相容ie678。
.box
.box
span
.box
:after
複製**
.wrap
複製**
.wrap
.child
複製**
CSS水平垂直居中方法總結
部分html 如下 div class wrap block div class block center 塊兒居中 div div div class wrap inline span class inline center 內聯居中 span div 一 absolute 二 table inl...
CSS總結水平垂直居中方法
設定塊級元素內文字的水平居中對齊方式，如div p h1 h6等塊級元素標籤 單行文字垂直方向上居中，使其等於height的高度 好好學習天天向上 p p若有多行文字，則新增以下 center 好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上 p div center...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...