图文布局列表 文字垂直居中

以往我们是这样的

 1. 方法一

一个div然后img 和span，如果给div 一个高度，那么span 在div 盒子中居中很好办，设置span 的line-height属性

 2. 方法二

或者直接绝对定位，原理一样，还得设置div的width:40px;height:60px;position:relative，然后设置span样式position:absolute;top:50%;left:50%;margin-left：-20；margin-top:-30

3. 方法三

现在div是图片撑开的，响应的，不能设置高度，那么要让这个span居中的话就设置display: block; margin-top: 30%;

update 2015年12月29日15:41:36
响应式垂直左右居中：

.inner{
    position : absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

效果图：

上我的产品页样式：

css控制先隐藏这遮罩层，hover的时候再显示；用sass简单写的嵌套，结构看的更清楚些

/*
** product-list page start
*/

#product-page{
    ul#leaplist {
      li{
          margin-bottom:10px;
        position:relative;
            .product-list{
                position:relative;
                a{
                    position:absolute;
                    width:100%;
                    height:100%;
                    background-color:rgba(0,0,0,.5);
                    text-align:center;
                    top:0;
                    left:0;

                    display:none;
                    &:hover{
                        font-size: 18px;
                        color:#fff;
                        text-decoration: inherit;
                    }
                    span{
                          display: block;
                          margin-top: 30%;
                    }
                }

                &:hover a {
                    display:block;
                }
            }        

      }  
    }
}

2015年6月27日16:22:08

推荐阅读 css实现的五种垂直居中的方法

我个人推荐该文章中的方法二和四，特别好用，方法五设置line-height和height一致居中一般都是单行文本，标题这种的。方法三适用于整体布局页面层级的居中

---