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

最新推荐文章于 2022-04-18 01:51:19 发布

chanzig

最新推荐文章于 2022-04-18 01:51:19 发布

阅读量788

点赞数

CC 4.0 BY-SA版权

分类专栏： Html+Css 文章标签：文字垂直居中遮罩层 css垂直居中

本文链接：https://blog.youkuaiyun.com/chanzig/article/details/45719041

Html+Css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了几种使用CSS实现元素垂直居中的方法，包括利用绝对定位、transform属性和百分比margin等技术手段。通过这些方法可以有效地解决不同场景下元素的居中问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以往我们是这样的

 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;
                }
            }        

      }  
    }
}