CSS 利用transform达到居中效果

本文转载自查看原文 2019-01-23 15:43 3911 web前端

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css 利用flex居中对齐 css – 为什么“左：50％,transform：translateX(-50％)”水平居中的元素？水平居中和transform: translateY(-50%) 实现元素垂直居中效果水平居中和transform: translateY(-50%) 实现元素垂直居中效果 css实现水平/垂直居中效果 css实现单行的靠左靠右和居中效果实用CSS3的transform实现多种动画效果 6种css3 transform图片悬停动态效果 css transform 元素放大且有过渡效果 CSS3旋转缩放移动倾斜等效果——transform