css中position:fixed实现div居中上下左右居中

首先，我们需要了解一下position属性的取值。CSS中的position属性常用的取值有：static、relative、absolute和fixed。

其中，fixed可以使元素固定在页面中的某一个位置，不随着滚动而改变位置，这就非常适合实现div居中上下左右居中的效果。

下面我们来详细讲解一下如何用position:fixed实现div居中上下左右居中。

步骤一：首先，在HTML文档中添加要居中显示的div元素：

<div class="center">
  这里是要居中显示的内容
</div>

步骤二：接下来，我们需要用CSS来设置这个div元素的样式，实现居中的效果。

首先，我们设置该元素的样式为position: fixed，并让它同时置于页面正中央：

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 将div的左上角移动到页面中央 */
  transform: translate(-50%, -50%);
}

解释一下，top和left属性分别表示该元素离页面顶部和左侧的距离。我们将它们都设为50%，这样该元素会垂直和水平居中。

但是这样还不够，因为元素是以左上角为基准点进行定位的，所以我们需要通过 transform:translate(-50%, -50%) 来偏移元素，使其中心点与页面中央对齐。

步骤三：使用position: fixed来实现水平居中和垂直居中的效果。

要实现水平居中，可以将该元素的宽度设为固定值，然后用 left 和 margin-left 属性来进行居中对齐：

.center {
  position: fixed;
  top: 50%;
  /* 等同于margin-top: -50px */
  margin-top: -50px;
  left: 50%;
  /* 等同于margin-left: -100px */
  margin-left: -100px;
  width: 200px;
  height: 100px;
}

要实现垂直居中，则可以将该元素的高度设为固定值，然后用 top 和 margin-top 属性来进行居中对齐：

.center {
  position: fixed;
  top: 50%;
  /* 等同于margin-top: -50px */
  margin-top: -50px;
  left: 50%;
  /* 等同于margin-left: -100px */
  margin-left: -100px;
  width: 200px;
  height: 100px;
}

至此，我们已经完成了用position:fixed实现div居中上下左右居中的效果。

示例一：实现滚动时元素固定在页面中央

下面我们来看一个完整的实例：实现滚动时元素固定在页面中央的效果。

HTML代码：

<div class="center">
 这里是要固定居中显示的内容
</div>

CSS样式：

.center {
  position: fixed;
  top: 50%;
  /* 等同于margin-top: -50px */
  margin-top: -50px;
  left: 50%;
  /* 等同于margin-left: -100px */
  margin-left: -100px;
  width: 200px;
  height: 100px;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 100px;
}

这样，我们就可以使用下面的JS代码来实现滚动时元素固定在页面中央的效果：

<script type="text/javascript">
  $(function() {
    var top = ($(window).height() - $(".center").height()) / 2;
    $(window).scroll(function() {
      var scrollTop = $(document).scrollTop();
      if (top - scrollTop > 0) {
        $(".center").css({
          "top": top - scrollTop
        });
      } else {
        $(".center").css({
          "top": 0
        });
      }
    });
  });
</script>

示例二：实现元素始终位于屏幕中央

下面我们来看另一个实例：实现元素始终位于屏幕中央的效果。

HTML代码：

<div class="center">
 这里是始终居中显示的内容
</div>

CSS样式：

.center {
  position: fixed;
  top: 50%;
  /* 等同于margin-top: -50px */
  margin-top: -50px;
  left: 50%;
  /* 等同于margin-left: -100px */
  margin-left: -100px;
  width: 200px;
  height: 100px;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 100px;
}

这样，我们就可以使用下面的JS代码来实现元素始终位于屏幕中央的效果：

<script type="text/javascript">
  $(function() {
    var top = ($(window).height() - $(".center").height()) / 2;
    var left = ($(window).width() - $(".center").width()) / 2;
    $(window).resize(function() {
      $(".center").css({
        "top": ($(window).height() - $(".center").height()) / 2,
        "left": ($(window).width() - $(".center").width()) / 2
      });
    });
    $(".center").css({
      "top": top,
      "left": left
    });
  });
</script>

在这个实例中，我们使用了 $(window).resize() 方法来监听窗口大小变化事件，再使用 .css() 方法来动态调整元素的 top 和 left 偏移量，从而保证元素始终位于屏幕中央。