css固定div在正中间

在Web开发中，固定一个div（层）在正中间是一个常见的需求，这个技巧可以用CSS实现。接下来，我将教你如何在CSS中设置一个div固定在正中间。

 
.center-div {
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
}

首先，我们需要用CSS的position属性来将div定位到页面上。通过设置position为“fixed”，它将会固定在屏幕上，并不会随着页面的滚动而移动。

其次，我们需要将div定位在屏幕的中间。我们可以使用top和left属性将其放置在屏幕的正中央。将top设置为50%将把div向下移动到视口的垂直居中位置，left设置为50%将把div向右移动到视口的水平居中位置。

最后，为了确保div在视口的正中间，使用transform属性和translate函数来将其向上和向左移动一半的高度和宽度。由于div元素的默认原点为左上角，我们需要使用负值来确保元素向上和向左移动。

现在你已经知道如何将一个div固定在正中间了吧！