如何使图标容器内的元素超出容器且内部span在容器中居中显示？

我懂你的需求啦——就是想让.icon里面的小方块既能突破红色容器的边界露出来，又能稳稳地在容器正中间位置，对吧？你现在的代码已经搞定了溢出的问题，但居中还没到位，我给你调整两种可行的方案～

方案一：用Flex布局快速实现（推荐） #

把容器改成inline-flex，借助Flex的居中属性直接搞定对齐，同时保留你原来的溢出设置：

.icon {
  line-height: 1.2;
  width: 1em;
  height: 1em;
  display: inline-flex; /* 替换inline-block，兼顾inline特性和居中能力 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  overflow: clip;
  overflow-clip-margin: 1.2em;
  background-color: red;/*for debugging*/
}

<span class="icon">
  <span style="display: inline-block; width: 30.1699px; height: 8.48528px; background-color: currentcolor;"></span>
</span>

原理很简单：inline-flex让容器保持行内元素的特性，同时内部开启Flex布局，两个居中属性直接把内部span钉在容器的中心点，溢出的设置也完全不受影响。

方案二：绝对定位+Transform居中 #

如果你更习惯用定位的方式，也可以这样写：

.icon {
  line-height: 1.2;
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative; /* 设置相对定位，作为内部元素的定位参照 */
  overflow: clip;
  overflow-clip-margin: 1.2em;
  background-color: red;/*for debugging*/
}

.icon > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 让元素自身向左向上偏移一半，实现精准居中 */
}

HTML部分不需要改动，这种方式是通过绝对定位把元素拉到容器的右上角，再用transform把它拽回中心点，同样能实现居中+溢出的效果。

备注：内容来源于stack exchange，提问作者mpen