关于块级元素在块级元素中的居中方法

刚接触干活的时候就是喜欢设置各种样式来美化自己的页面，看到这个好就想做这个，比如：块元素里面套一个块元素，但出现并不居中的情况
举个栗子：

<style>
  div{
   width:800px;
   height:50px;
}
  a{
  display:inline:block;
}
</style>
<div>
  <a>1</a>
  <a>1</a>
  <a>1</a>
  <a>1</a>
</div>

设置

• 当不设置div的高度时，width设置的越大会把块元素高度向下延伸，下面所有的布局将会随着块元素的变动而上下移动，不美观
• 如果设置div的高度时，就出现上图这种情况，文字不处于块元素中间，看着就闹心，尤其在做简单的缩放动画的时候偏离更远了，但好处是不影响其他元素

在此不讨论关于其余css动画参数的应用，一是讨论特定情况下的处理方法，二是我现在也不会（捂脸）

利用好line-height

line-height的定义是属性设置行间的距离（行高）
也就是说可以利用行高的特性来定义第一行文字距离div顶部的高度，高度用固定值来设置
同样在CSS动画中可以再次定义行高，来达到匹配的效果

这样看上去好多了
即使位置需要变化，只需要增加行高就能保持在居中位置

当然以上是最基础，最蠢的办法，在刚接触时期最简单的方法

如果熟练以后可以使用CSS的transform: scale()函数，在缩放的同时不会对其他元素造成影响

• 此时可以不定义div的高度，那么块元素的位置会一直保持在居中，也剩下很大麻烦

拓展阅读

line-weight深入了解
transform介绍
CSS居中完整指南