首页 > Web开发 > 详细

CSS 利用transform达到居中效果

时间:2019-01-23 16:47:36      阅读:166      评论:0      收藏:0      [点我收藏+]
<body>
    <div class="center">
        ....
    </div>
</body>

让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 

CSS 利用transform达到居中效果

原文:https://www.cnblogs.com/caster-xzn/p/10309373.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!