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

要实现将一个元素在窗口上下左右居中，需要结合position: fixed和transform属性来完成。

要实现将一个元素在窗口上下左右居中，需要结合position: fixed和transform属性来完成。

具体操作步骤如下：

1. 首先，需要将元素的position属性设为fixed，将其定位在浏览器窗口的位置上。

div{
  position: fixed;
  top: 50%;
  left: 50%;
}

这样做会让这个元素距离窗口顶部和左侧各50%。然而，此时元素的左上角位于窗口左上角的(50%, 50%)位置，而我们需要的是将其中心点置于窗口中心，因此还需要对其进行位移。

1. 利用transform属性，将元素往左上方移动其宽度和高度的一半。这样，元素的中心点就位于窗口中心了。

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

这样，窗口中的元素就居中了。当然，如果我们只想将元素在水平方向上居中，可以将元素宽度设为固定值，然后使用margin: 0 auto;实现水平居中。

下面，我们来看两条具体的示例说明：

示例1：居中的div

HTML代码：

<div class="center">
  <p>我是一段文字</p>
</div>

CSS代码：

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}

这段代码会将一个200x200的灰色div居中在窗口中，并在其中放置一段文本。

示例2：水平居中的div

HTML代码:

<div class="center2">
  <p>我是一段文字</p>
</div>

CSS代码：

.center2{
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}

这段代码会将一个200x200的灰色div水平居中在窗口中，并在其中放置一段文本。