如何实现div#tag内三角形的垂直与水平双向居中对齐

问题根源 #

你写的居中样式不生效，是三个细节错误导致的：

• 错用了flex布局属性：你写的align-content: center只对开启换行的多行flex容器生效，单行flex元素要做垂直居中必须用align-items: center
• 未给触发标签设置固定高度：当前div#tag的高度完全由内部20px的字体撑开，没有多余的垂直空间，居中规则没有生效的基础
• 三角形是文本字符，浏览器默认行高会给字符上下预留额外空白，加上你设置的20px字体和容器宽度一致，直接把容器撑满，自然看不出居中效果

修复代码 #

直接替换原有div#tag的CSS样式即可：

div#tag {
  /* 垂直居中：替换原有的align-content */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  border: 1px solid yellow;
  border-left: none;
  border-radius: 0px 5px 5px 0px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  /* 适当缩小三角形字号，避免撑满容器 */
  font-size: 12px;
  /* 给标签设置固定高度，和宽度保持一致 */
  height: 20px;
  /* 清除文本默认行高带来的视觉偏移 */
  line-height: 1;
  left: 4.5px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 20px;
}

修改后三角形会在黄色标签块内实现完美的水平、垂直双向居中，不会出现偏移。

内容的提问来源于stack exchange，提问作者The KNVB