有个position: absolute;定位的元素,宽度不一定,高度不一定,但是需要水平居中展示。想到一个很绝的方法。
position: absolute;
z-index: 1000;
top: 0px;
width: auto;
// right: 0px;
left: 50%;
transform: translateX(-50%);
用left 和transform结合。
垂直居中
position: absolute;
z-index: 1000;
top: 50%;
width: auto;
transform: translateY(-50%);
水平垂直居中
position: absolute;
z-index: 1000;
top: 50%;
width: auto;
// right: 0px;
left: 50%;
// transform: translateX(-50%);
transform: translateY(-50%);
transform: translateX(-50%);
原理:left 控制元素到外层元素的左侧距离,50%代表中间,translateX(-50%)元素再向左移动自身的50%。正好到中间