码迷,mamicode.com
首页 > Web开发 > 详细

CSS 利用transform达到居中效果

时间:2019-01-23 17:20:51      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:width   color   nbsp   translate   orm   osi   tran   round   宽度   

<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达到居中效果

标签:width   color   nbsp   translate   orm   osi   tran   round   宽度   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!