前段時間要做一個類似的效果鏈接：
大致結構就是兩個同心圓，最內的圓有一串文字，文字水平、垂直都居中。
然后我就開始去做啦，看似很簡單，但一開始效果就是做不出來，哭/(ㄒoㄒ)/~~，因為要做自適應，所以定位什么的都沒用，后來看了一些資料，感覺以下這個方法算是能在實現效果的基礎上代碼最簡單，也最容易理解了。
代碼如下：
做的時候發現了幾個問題：
1.同心圓
網上大多做法是寫兩個div，內部div設置寬高，然后margin：auto。這樣做了以后我發現只有水平居中，沒有垂直居中。
所以我的做法是兩個div，外面的div設定寬高以及padding，內部div設置寬高為100%充滿父級div，這樣就居中啦。
2.span標簽在div中居中
水平居中很容易，在div樣式中寫text-align即可。問題是垂直居中，第一反應是給span樣式中添加vertical-align：middle。
這么想的原因是，w3c中文網上給出的vertical-align解釋是這樣的：vertical-align 屬性設置元素的垂直對齊方式。middle:把此元素放置在父元素的中部。
很簡單有木有，然后我就想當然的以為添加了這個樣式后，span會放在他的父級div中部，可是做的時候就發現了不行，span根本沒有在div居中：
然后我就去找原因啦，發現還有這么一行字：
說明
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
意思是添加該樣式的標簽里的內容和該標簽的垂直對齊方式，也就是說是span的文字和span的對齊方式，而非span和div的對齊方式。那么就可以這么做，將span的line-height設置成div的heigh,然后給span加上vertical-align：middle;那么文字就在span垂直居中了，而span又與div等高，那從效果來看就是span在div中央：
最后，修改下，做出來的效果就是這樣啦~
3.回顧下盒子模型，
<div class="outer">
<div class="inner"></div>
</div>
