活用:after 让图片垂直居中

现在莫名虽然更喜欢 background 但大多时候还是选择用 img，这其中的利弊争议不在本文中赘述。

那么在布局中常会遇到定高容器中图片居中的需求，这时就有很多方法了呀：

line-height + vertical-align:middle;

table-cell + vertical-align:middle;

absolute + transform: translate(-50%,-50%); （或者 absolute + margin）

甚至不用全宽的： padding + height: x%;

 

而今天要用的方法呢，看完你就差不多懂了

.pic_box{
　　width:300px;
　　height:300px;
　　background-color:#beceeb;
　　text-align:center;
}
.pic_box img{
　　vertical-align:middle;
}
.pic_box:after{
　　display:inline-block;
　　width:0;
　　height:100%;
　　content:"center";
　　vertical-align:middle;
　　overflow:hidden;
}

是不是很简单，虚构一个全高的隐形的 :after 然后让图片和它居中。

 

好吧，又写完一篇，今天第三篇了，好带感呀