同心圆制作 div中的span标签垂直对齐

前段时间要做一个类似的效果链接：

大致结构就是两个同心圆，最内的圆有一串文字，文字水平、垂直都居中。

然后我就开始去做啦，看似很简单，但一开始效果就是做不出来，哭/(ㄒ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>