css水平垂直居中方案（前端UI样式:3.0）

外层边框部分高度固定，内部块级结构居中

html结构：

//<!-- - ->注释掉空格 <div class="verMiddle outerLayerWrap"> <div class="innerLayer"></div> </div>

style样式：

//通用样式 .verMiddle::before{ display: inline-block; vertical-align: middle; content: ''; height: 100%; width: 0; overflow: hidden; } //外层样式 .outerLayerWrap{ width:100px; height:100px; border:1px solid #ccc; text-align:center; } //内层样式 .innerLayer{ width:40px; height:40px; background:red; vertical-align:middle; display:inline-block; }