在使用display: table布局时，如果使用元素添加display: table-cell属性后该元素如果设置width:100%那么会出现失效问题。在实现不同大小图片水平垂直居中对其中，如果图片父元素设置不能用固定值设置宽度而使用%，如下图会出现这样的问题：

父元素宽度100%失效，无法被图片撑开，也就无法实现图片水平居中对其，怎么解决这个问题？实现下图所示呢？

1. <style>
2. .img{height: 320px;overflow:hidden;width:0.1%;text-align: center;display: table-cell;vertical-align:middle;}
3. .img img{ vertical-align: middle;max-width: 100%;max-height: 100%;margin:0 auto;}
4. </style>

方法很简单，只需把父元素设为width:0.1%即可，也就是宽度设为很小，display: table-cell就占满100%宽度了。