你所不知css世界的vertical-align

很多人不知道其实vertical-align的属性值支持数值，这在实际开发的时候实用性非常强，主要是它不仅兼容性好而且可以精确控制内联元素的垂直对齐位置，通常vertical-align我们都是设置middle,top等，但是这个有个严重的不足之处，就是垂直对齐的位置是固定的，往往最后并不是我们想要的像素级精确对齐效果。当我们设置vertical-align：middle只能说是近似垂直居中,平时我们设置的font-size是12px或者14px,所以偏差也就1-2px，普通用户也不会怎么察觉。

比如一些小图标对齐的例子，假设有个display值为inline-block的尺寸为20×20像素的小图标，默认状态下，文字是明显偏下的，就算我们设置了vertical-align：middle，图标会往下多移了1px，这个时候我们直接设vertical-align：-5px;便会实现图片和文字真正意义上的垂直居中。

1.来说一下vertical-align作用的前提

前提条件是：只能应用于内联元素以及display值为table-cell的元素。但是你要小心，浮动和绝对定位会让元素块状化，因此这个也会失效，尽管如此还是有些情况没反应：

.box{
height:128px;
}
.box>img{
height:96px;
vertical-align:middle;
}
<div class="box">
<img src="a.png">
</div>

此时图片顶着.box元素的上边缘显示并没有居中，这就郁闷了，其实已经渲染了只是盒子前面的空白节点高度太小，在.box加一个line-height:128px就会起作用。以后设了没反应可以加一个试试。另外说一下display:table-cell,它可以无视行高，比如下面代码：

.cell{
height:128px;
display:table-cell
}
.cell>img{
height:96px;
vertical-align:middle
}
<div class="cell">
<img src="1.png">
</div>

看起来好像没什么问题，但是又是没效果，原因是，对table-cell而言，vertical-align起作用的是table-cell自身，所以代码应该这样写，

.cell{
height:128px;
display:table-cell；
vertical-align:middle
}
.cell>img{
height:96px;
}

就算子元素是一个块级元素，也一样可以让其有垂直对齐的表现。所以垂直居中方法虽然多，但是一定要清楚怎么用。

2.推荐一个我自己觉得非常棒的vertical-align实践，就是使用纯css实现大小不固定的弹框永远居中的效果，一个container，显示半透明背景，然后里面的子元素就是弹框主体，html如下

<div class="container">
           <div class="dialog">
               qaersadffffffaaaaaaaaaaaa
           </div>
       </div>

关键的css代码为：

.container{
       position: fixed;
       top:0;left:0;right: 0;bottom: 0;
       background-color: rgba(0,0,0,.5);
       text-align: center;
       font-size: 0;
       white-space: nowrap;
       overflow: auto;
   }
   .container:after{
       content:"";
       display:inline-block;
       height: 100%;
       vertical-align: middle;
   }
   .dialog{
       width: 300px;
       height: 300px;
       padding: 20px;
       display: inline-block;
       vertical-align: middle;
       text-align: left;
       font-size: 14px;
       white-space: normal;
       border-radius: 6px;
       background-color: #fff;
   }

效果图为：

无论浏览器尺寸是多大，也无论弹框尺寸是多少，我们的弹框永远都是居中的。相比之前要用js去做定位居中的性能好渲染速度快，我们同样可以控制垂直居中的比例，把height:100%，改成90%就是近似2:3的效果。

这种效果很常见，大家可以用代码去试下然后收藏起来，很好用。