css 居中

absolute 绝对定位来居中

1. 先让元素左上角居中

  top: 50%;
  left: 50%;

2. 再根据容器的大小来设置外边距偏移量

  width: 800px;
  height: 500px;

  margin-left: -400px;
  margin-top: -250px;

拓展：过渡玩法：

  background-size: cover;
  background-size: 100% 100%;
  background-position: center;
  background-attachment: fixed;
  transition: background-size 2s cubic-bezier(0, .98, .33, 1.1);

动态居中浮动随机名言，浮动动态范围为.login的顶点y轴

setInterval(() => {
    var xhr = new XMLHttpRequest();
    xhr.open("get", "https://api.ooomn.com/api/yan");
    xhr.send();
    xhr.onload = function () {
        if (xhr.status === 200) {
            var top = document.querySelector(".top");
            top.innerText = xhr.responseText;
            //获得.login 元素的位置
            var login = document.querySelector("#login");
            var rect = login.getBoundingClientRect();
            console.log(rect);
            top.style.top = Math.floor(Math.random() * (rect.y - top.offsetHeight)) + "px";
            top.style.color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
        }
    }
}, 10000)