在寫頁面時(shí)經(jīng)常會(huì)碰到文字在div中要居中的情況。水平居中很容易，text-align:center就能實(shí)現(xiàn)；但垂直居中很少用到，要么就是直接給margin，但現(xiàn)在講解一下不用margin如何實(shí)現(xiàn)垂直居中。

  
  
  
  
  
 
* { margin:0; padding:0;}	
div{display:table-cell;vertical-align: middle;text-align: center;letter-spacing: 3px;width: 525px;height: 336px;border: 1px solid #000;} 
p {width:100%;}  
  
  
  

	
設(shè)計(jì)理念
	
在拍攝的角度去考慮實(shí)景的設(shè)計(jì)，
	
我們對(duì)每一客戶的空間進(jìn)行精準(zhǔn)測(cè)量。
	
了解客戶拍攝習(xí)慣、風(fēng)格、拍攝器材，
	
更準(zhǔn)確測(cè)算射距、光線等因素。
	
實(shí)景設(shè)計(jì)規(guī)劃由設(shè)計(jì)師綜合各方面因素設(shè)計(jì)，
	
只為確保最終拍攝效果。


  

這里其實(shí)主要用的css是這兩個(gè)，display:table-cell;vertical-align: middle;

display:table-cell  w3c給出的解釋是此元素會(huì)作為一個(gè)表格單元格顯示（類似 和 ）

vertical-align: middle  字面意思就是垂直居中：中間

通過上述代碼就能實(shí)現(xiàn)。

演示地址：http://www.tongyilingma.com/d/demo/vertical/