垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。
方法1：table-cell
html結構：
垂直居中
方法2：display:flex
.box2
方法3：絕對定位和負邊距
.box3
.box3 span
.box4 span這種方法跟上面的有些類似，但是這裡是通過margin:auto和top,left,right,bottom都設定為0實現居中，很神奇吧。不過這裡得確定內部元素的高度，可以用百分比，比較適合移動端。
方法5：translate
.box6 span
這實際上是方法3的變形，移位是通過translate來實現的。
方法6：display:inline-block
.box7
.box7 span
.box7:after
這種方法確實巧妙...通過:after來佔位。
方法7：display:flex和margin:auto
.box8
.box8 span
方法8：display:-webkit-box
.box9今天又發現一種方法，現在補上：
方法9：display:-webkit-box
這種方法，在 content 元素外插入乙個 div。設定此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮動，並顯示在中間。
content here
.floater
.content
適用於所有瀏覽器
沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現
缺點：
唯一我能想到的就是需要額外的空元素了(也沒那麼糟，又是另外乙個話題)
CSS 實現垂直居中的幾種方案
最近在學關係型資料庫相關，mysql 和 postgre,捎帶著學了 php，為了練手這幾天就忙著自己搭部落格，專案部署在某雲上，該雲算是良心，給的空間自己搭部落格用足夠了。本來想著每日一bo的,所以有的時候實在來不及就只能隔天更新了。以後盡量發點東西出來，等部落格搭完寫一寫 sql 資料庫基礎相關...
css垂直居中的幾種方式
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html class container hi,imooc div css container style 說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical al...
css垂直居中的幾種方式
1.對於可以一行處理的 設定 height apx line height apx 2.對於一段文字 會多行顯示的 2.1如果是可以設定乙個固定高度的 父元素使用display table height apx 子元素使用 display table cell vertical align midd...