以下總結了一些常見的元素垂直居中方法：
首先，基本的html和css為
#wrap#wrap>div
我是前端狗
方法：
/*方案一：絕對定位負margin50%方法*//*#wrap*/
/*.v-center*/
/*方案一 優化版:利用calc支援單位運算，致命缺點uc這2貨嗝屁了，國內移動端別想了*/
/*.v-center*/
/*方案一 再優化版：利用translate
* 注意transform需要加上webkit uc qq 自帶瀏覽器在本手機上完美支援
* 優點是不需要知道居中元素的高寬！！！
* 這裡translate的50%就是自己高寬的50%，而margin是以父親的寬度為基準
* */
/*.v-center*/
/*方案二： 脫離絕對定位，利用視口單位
* 因為vh是視口單位，視口就是螢幕可視區域，也就是說，這種辦法永遠在螢幕居中
* 居中彈層才考慮這種辦法，並且uc還是不支援
* 好吧，這種方法當我沒說
* */
/*.v-center*/
/*方案三： table-cell
* 請不要歧視table，table-cell在這個demo中支援度完美
* 但是wrap此時不能使用margin了，就像每一種藥都多少有點***一樣。。
*//*#wrap
.v-center*/
/*方案四： 利用浮動元素
* 支援度完美
* 缺點是還是需要知道元素高度，以及hack味道很濃
*//*#wrap::before
.v-center*/
/*方案五： flex
*uc不支援
* */
#wrap
.v-center
最後有個好訊息，qq瀏覽器的x5即將退出歷史舞台被chrome37替換，uc你看著辦。
元素垂直居中方法
1 固定height的元素居中 1 使用絕對定位 相容所有瀏覽器，瀏覽器視窗縮小時，部分內容會消失 居中元素 content 2 在居中元素外插入乙個div 相容所有瀏覽器，瀏覽器視窗縮小時，內容不會消失 居中元素 main content 3 使用絕對定位，margin auto 相容所有瀏覽器，...
angular 居中 垂直居中方法總結
box position absolute margin auto top 0px right 0px bottom 0px left 0px width 100 height 30 background color red text align center 第一種的好處是不用知道垂直居中的元素的...
垂直水平居中方法總結
今天老大隨口問了這個問爛了的問題，我只回答了兩種，好吧，還是老老實實總結下來加強下記憶吧。一 定位 邊距 固定寬高度適用 container inner 複製 container inner 複製 二 定位 transform 不固定寬高也適用 container inner 複製 三 flex布局...