纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》

《详解定位与定位应用》是一本经典的前端技术书籍，其中包含了许多关于定位与定位应用的知识。本文主要讲解该书中的一个例子，即“纯CSS定位的固定垂直居中浮动层代码”。

这个浮动层代码主要通过CSS样式实现，具体实现方法如下：

HTML代码：

<div class="wrapper">
  <div class="box">
    <p>我是内容</p>
  </div>
</div>

CSS代码：

/* 布局 */
.wrapper {
  position: relative; /* 定位上下文 */
  height: 100vh; /* 根据实际情况设置高度 */
}
.box {
  position: absolute; /* 定位 */
  top: 50%; /* 距离上边界的距离为父容器高度的 50% */
  left: 50%; /* 距离左边界的距离为父容器宽度的 50% */
  transform: translate(-50%, -50%); /* 通过transform属性将元素向上、向左移动自身宽高的一半，达到垂直水平居中效果 */
  width: 200px; /* 根据实际情况设置宽度 */
  height: 200px; /* 根据实际情况设置高度 */
  background-color: #fff; /* 根据实际情况设置背景颜色 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 根据实际情况设置阴影 */
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

这段代码主要利用了CSS中的定位和transform属性，通过将元素向上、向左移动自身宽高的一半的距离，实现了其在垂直和水平方向都居中的效果。其中，position属性用于指定元素的定位方式，transform属性用于指定元素的变形方式。

示例说明1：

假设我们要将一个div元素垂直、水平居中显示在网页中，我们可以将该元素放在一个具有固定高度的父容器中，然后采用上述代码实现居中效果。例如：

HTML代码：

<div class="wrap">
  <div class="center-box">
    <p>我是居中的内容</p>
  </div>
</div>

CSS代码：

.wrap {
  height: 600px;
}
.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

示例说明2：

假设我们要在网页中实现一个对话框的效果，该对话框需要位于屏幕中央、并且不随页面滚动而移动。我们可以采用上述代码实现该效果。例如：

HTML代码：

<div class="overlay">
  <div class="dialog">
    <p>我是对话框内容</p>
  </div>
</div>

CSS代码：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

这段代码中，我们利用了CSS中的position: fixed属性将对话框固定在屏幕中央不动，并将其背景颜色设置为半透明的黑色。同时，对话框内的内容结构和样式与示例1中的方法基本相同，都是通过设置position: absolute、top: 50%、left: 50%和transform: translate(-50%, -50%)等样式实现居中效果。