在前端開發過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設置元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來讨論一下實現垂直居中的方法。
1.如圖需實現黃色盒子垂直居中
代碼如下：
現在我們需要将sub-box盒子居中；那麼一共有多少種方法呢？
1.我們可以知道外面盒子寬高，裡面盒子寬高也清楚，那麼，就很簡單了，對，就是定位了，首先給外面盒子相對定位，裡面盒子絕對定位就好了
2.第二種方法（通過設置div的transform: translate(-50%)，意思是使得div向上、向右平移（translate）自身高度、寬度的一半(50%)）
上述方法我們都是基于設置div的top值為50%之後，再進行調整垂偏移量來實現居中的。如果使用CSS3的彈性布局（flex）的話，問題就會變得容易多了。
3.通過flex布局，代碼稍微調整一下就ok。
最終效果：
除了上面3中方法之外，當然可能還存在許多的可以實現垂直居中的方法。因為這也是我工作中常用的，大家可以讨論前端的各種知識點，這個也是我第一篇文章，希望可以也大家一起多多分享web前端的知識，後面文章希望越寫越好。
,
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
