快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSS中translate实现水平垂直居中效果的方法

这篇“CSS中translate实现水平垂直居中效果的方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS中translate实现水平垂直居中效果的方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

站在用户的角度思考问题,与客户深入沟通,找到四平网站设计与四平网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、做网站、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖四平地区。

translate(-50%,-50%) 属性:
向上和左,移动自身长宽的 50%,使其居于中心位置。

与使用margin实现居中不同的是,margin必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate函数中的百分比是相对于自身宽高的百分比
(使用top和left为50%时,以窗口左上角为原点)。

示例:





    
    
    
    Document
    
        .container {
            position: relative;
            width: 50%;
        }

        .container img {
            width: 100%;
            display: block;
            height: auto;
        }

        .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: 0.5s ease;
            background: rgb(0, 0, 0);
        }

        .container:hover .overlay {
            opacity: 0.5;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    



    

淡入效果

                                   Hello World
        
    

效果:

CSS中translate实现水平垂直居中效果的方法

感谢你的阅读,希望你对“CSS中translate实现水平垂直居中效果的方法”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注创新互联行业资讯频道!


网站栏目:CSS中translate实现水平垂直居中效果的方法
文章链接:http://6mz.cn/article/jidshc.html

其他资讯