CSS 利用transform达到居中效果 

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

 

posted @ 2019-01-23 15:43  哈比Sport  阅读(18831)  评论(0)  编辑  收藏  举报