CSS中position属性之fixed实现div居中

下面是详细讲解“CSS中position属性之fixed实现div居中”的完整攻略：

一、认识position属性

在介绍fixed定位居中之前，我们需要先了解一下position属性。position属性用来设置元素的定位方式，有以下几种值：

1. static：默认排版方式，元素遵循正常文档流，不具有定位能力。一般不需要声明这个值。
2. relative：相对于元素本身原来的位置进行定位，不影响原来的文档流。
3. absolute：相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于文档的body元素进行定位。
4. fixed：相对于浏览器窗口进行定位，不随滚动条的滚动而改变位置。

二、使用fixed定位实现居中

当我们希望某个元素在浏览器窗口中居中显示的时候，可以使用fixed定位的方式来实现。

下面是一个例子，假设有一个div，宽度为400px，高度为200px，现在需要将这个div居中显示在浏览器窗口中：

<div class="center-div"></div>

我们可以通过下面的CSS代码来设置该div元素的样式：

.center-div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
    width: 400px;
    height: 200px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
}

其中，position属性设置为fixed表示该元素使用fixed定位方式进行定位。top和left属性设置为50%，这样该元素的左上角就在屏幕中间位置。接着，我们需要将该元素向上和向左移动一半的宽度和高度，这可以通过设置margin-top和margin-left属性的负值来实现。最后，设置该元素的宽度、高度、背景颜色和边框样式，这里不再赘述。

另外，我们还可以使用CSS3中的transform属性来实现居中效果，如下所示：

.center-div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 200px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
}

transform属性的translate方法可以将元素沿着x轴和y轴方向进行移动，其中参数-50%表示在x轴和y轴方向上向左和向上移动一半的宽度和高度，从而实现居中效果。