资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css如何利用transform的属性实现盒子居中

这篇文章主要介绍css如何利用transform的属性实现盒子居中,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站服务项目包括浙江网站建设、浙江网站制作、浙江网页制作以及浙江网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,浙江网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到浙江省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

利用transform的属性(缺点:需要支持Html5)


    .div1 {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
        position: relative;
    }

    .div2 {
        height: 40px;
        width: 40px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


    
    

效果图:

css如何利用transform的属性实现盒子居中

以上是“css如何利用transform的属性实现盒子居中”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站栏目:css如何利用transform的属性实现盒子居中
文章网址:http://www.cdkjz.cn/article/pohesd.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220