css 正方形倾斜后 如何居中

在CSS中，将正方形倾斜后使其居中，通常需要结合`transform`属性的`rotate()`函数和`position`属性的`absolute`或`fixed`值以及`top`, `right`, `bottom`, `left`来实现。这里有一个基本的例子：

.parent {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 主轴（默认水平方向）居中 */
  align-items: center; /* 轴向（默认垂直方向）居中 */
  position: relative; /* 确保内层元素有定位基础 */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(45deg); /* 倾斜45度 */
  backface-visibility: hidden; /* 防止背面显示 */
  width: 200px; /* 正方形实际宽 */
  height: 200px; /* 正方形实际高 */
  background-color: #ccc; /* 正方形背景色 */
}

在这个例子中，`.parent`容器使用了Flexbox布局，并设置了`justify-content`和`align-items`属性来保证子元素在主轴和轴向上都居中。`.child`是倾斜的正方形，它被绝对定位在父容器的中心，同时`backface-visibility`隐藏了它的背面。

如果你不想依赖Flexbox，也可以用其他技巧，例如使用`translate`来调整位置：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  /* ... 其他样式 */
}

这会使得正方形在父容器的中心旋转。