元素居中展示

有个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%。正好到中间