CSS | 绝对的固定C位

demo transform: translate(-50%, -50%) 去中间

  <div id="app">
    我要在绝对的C位
  </div>
  <style>
    #app {
      padding: 50px;
      background-color: #f40;
      color: #fff;
      
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

---

transform 还是很有意思的一个属性，搭配 animation 还可以做一些好玩的动画。

go

  <div id="app">
    我要在绝对的C位
  </div>
  <style>
    #app {
      padding: 50px;
      background-color: #f40;
      color: #fff;

      position: fixed;
      left: 50%;
      top: 50%;

      animation: go 4s infinite;
    }

    @keyframes go {
      0% {}

      25% {
        transform: translate(-100%, 0%);

      }

      50% {
        transform: translate(-100%, -100%);
      }

      75% {
        transform: translate(0%, -100%);
      }

      100% {}

    }
  </style>