使用一个div画出垂直水平居中的加号形状——高效美观的前端技巧

15 min read

您可以使用CSS的伪元素和定位技巧来创建这个圆和加号。

以下是示例CSS代码：

div {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ff5c5c;
  border-radius: 50%;
}

div::before,
div::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 5px;
  background-color: #fff;
}

div::before {
  transform: translate(-50%, -50%);
}

div::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

解释一下这段代码的工作方式：

  • 我们给div元素设置了position: relative，以便我们以后相对于该元素定位。
  • 我们设置了width和height为200像素，并设置了border-radius为50%来创建一个圆形。
  • 我们使用伪元素来创建加号。我们使用::before和::after来创建垂直和水平的线条。
  • 我们使用position: absolute将这两条线条绝对定位到div元素的中心点。
  • 我们使用transform属性在垂直线条上平移和旋转水平线条，以创建十字形。

最终，您应该得到一个带有水平垂直居中的加号的红色圆形。