CSS 用 position: absolute 与 trans

(1) 绝对定位元素的定位基准点是其有定位元素的祖先元素;

(2) translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度。

负margin水平垂直居中

.center {
          position:absolute;
           top:50%;
           left:50%;
           width:200px;
           height:200px;
           margin-top:-200/2px;
           margin-left:-200/2px;
}

transform 水平垂直居中

.center {
           position:relative;
            top:50%;
            left:50%;
            width:200px;
            height:200px;
            background:red;
            transform:translate(-50%,-50%);
            transform-origin:50% 50%;
}

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

微信公众号.png 淘宝天猫内部优惠券.png