如何让CSS实现的菱形内部文本水平对齐？当前文本倾斜

嗨，这是个很典型的小坑——你把整个.diamond容器旋转了45度，里面的文本当然会跟着一起倾斜啦！咱们只需要把文本单独放在一个子元素里，反向旋转回来就能让文本保持水平，而且还能让排版更灵活。

方法一：子元素反向旋转（最兼容的方案） #

修改你的代码，把文本放在一个子容器里，给它设置反向旋转抵消父元素的旋转，同时用flex布局让文本在菱形里居中，效果会更好：

.diamond {
  height: 75px;
  width: 75px;
  border-radius: 15px;
  transform: rotate(45deg);
  float: left;
  margin-left: 18%;
  background-color: #ff4d4d;
  /* 新增flex布局，让子元素居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-text {
  font-size: 50px;
  color: white;
  font-family: Adequate-ExtraLight;
  /* 反向旋转，抵消父元素的45度旋转 */
  transform: rotate(-45deg);
  /* 可选：如果文本有溢出，调整一下缩放或间距 */
  /* transform: rotate(-45deg) scale(0.9); */
}

对应的HTML：

<div class="diamond">
  <span class="diamond-text">48</span>
</div>

为什么这样有效？ #

父容器旋转45度变成菱形，子元素反向旋转45度后，就会回到原本的水平状态，再通过flex布局让文本在菱形里完美居中，不会出现偏移的问题。

方法二：用clip-path绘制菱形（无需旋转） #

如果你不想用旋转的方式，也可以用clip-path直接绘制菱形，这样容器本身不需要旋转，文本自然就是水平的：

.diamond {
  height: 75px;
  width: 75px;
  border-radius: 15px;
  float: left;
  margin-left: 18%;
  background-color: #ff4d4d;
  /* 用clip-path绘制菱形 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* 同样用flex居中文本 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: white;
  font-family: Adequate-ExtraLight;
}

HTML还是原来的结构就行：

<div class="diamond">48</div>

注意点 #

clip-path在现代浏览器里支持很好，但如果需要兼容非常旧的浏览器（比如IE），方法一的反向旋转方案会更稳妥。

内容的提问来源于stack exchange，提问作者noonecan catch