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 利用transform 實現頁面居中效果如何利用CSS在網頁中達到鼠標懸浮到的地方，盒子里的內容從無到有的效果 css3 transform旋轉有3d效果 transform: translateY(-50%) 實現元素垂直居中效果 css3的transform:tanslateZ沒有效果 css 利用flex居中對齊 css——利用translate讓元素居中 css – 為什么“左：50％,transform：translateX(-50％)”水平居中的元素？使用CSS達到文字首尾對齊效果水平居中和transform: translateY(-50%) 實現元素垂直居中效果