2020-10-29 CSS position:fixed 如何居中

Posted 2023-05-13

参考技术A position:fixed 的元素脱离了文档流,不占据文档流的空间，这时 top、right、left、bottom 是根据 窗口 为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移;

那么我们如何设置 position:fixed 的元素居中呢？
如果我们这么做：

效果如下：

fixed 的元素的 左上角 居中了，但是我们要的是整个元素居中啊，怎么办呢

设置 margin-top 和 margin-left 分别为高度和宽度的一半的负值。
这样就居中了，效果如下

这么做的前提是你知道元素的宽度和高度，如果不知道宽高呢？

没关系

The translate value for transform is based off the size of the element, so that will center nicely.

tarmsform 属性的 translate 值是基于元素的大小，所以可以完美的居中啦~

ps： 如果只需要水平居中：

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

css [css：fadeout / fadein] css示例。 #css

.fadeOut {
  animation : fadeOut 0.1s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    height: initial;
  }
  100% {
    opacity: 0;
    height: 0px;
  }
}
.fadeIn {
  animation : fadeIn 0.1s;
  animation-fill-mode: both;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    height: 0px;
  }
  100% {
    opacity: 1;
    height: initial;
  }
}