小程序工坊暑期培训知识点挖掘学习1

本次知识点挖掘
CSS: transform: translateX(-50%);

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。

通过配合绝对定位，设置属性值达到垂直水平居中的效果，并且会自适应页面宽高。

代码演示：

.banner{
    position: relative;
}
.banner>ul img{
    width: 100%;
}
.banner .banner-list{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

代码效果：

这个属性在生产生活有十分强大的业务支持，在一些自适应的页面中，可以用它来进行定位排版，且十分简易。