[分享]CSS元素固定定位中间

CSS元素固定定位可使元素在页面滚动时保持位置不变，这对于某些页面元素的设计非常实用。而如何将元素放在页面中间呢？下面我们来看一下如此实现： .element { : fixed; top: 50; ...

CSS元素固定定位可使元素在页面滚动时保持位置不变，这对于某些页面元素的设计非常实用。而如何将元素放在页面中间呢？下面我们来看一下如此实现：

.element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

其中，position属性设置为fixed，使元素固定在页面中。top属性和left属性均设为50%，使元素的左上角定位在页面的中心位置。

而接着使用transform属性，将元素往左上方移动自身宽高的一半的距离，实现元素的中心定位效果。在这里，我们可以使用translateX和translateY属性，这样元素的定位将不再受到margin和padding等属性的影响。

这个方法简单易用，可以轻松实现页面中心元素固定定位的效果，不用过多地设置样式，也不会有兼容问题。