如何在React+TailwindCSS项目中水平居中Popover三角箭头

我在React项目里用TailwindCSS开发自定义Popover，其他样式都正常，但容器外的小三角始终没法水平居中。设置left: 50%后三角略微偏右，试了after:right-1/2又会略微偏左，相关代码和效果如下：

问题代码 #

<span
    id='popover-last-seen'
    className={classNames(
        'absolute opacity-0 inline-block top-full left-1/2 -translate-x-1/2 -translate-y-20 px-3 py-2',
        'bg-gray-700 text-xs text-center whitespace-nowrap rounded',
        'transition duration-150 ease-in-out',
        'after:content-[&quot;&quot;] after:absolute after:w-0 after:h-0 after:border-4 after:border-gray-700 after:top-11 after:left-1/2 after:rotate-45'
    )}>
    <span className='block text-white'>
        {standardTime(
            timestampToDate(chatee.lastSeen)
        )}
    </span>
    <span className='block text-gray-300 font-thin'>
        {standardDateTime(
            timestampToDate(chatee.lastSeen),
            false
        )}
    </span>
</span>

问题效果 #

解决方法 #

给伪元素添加after:-translate-x-1/2样式，修改后的伪元素类名如下：

after:content-[""] after:absolute after:w-0 after:h-0 after:border-4 after:border-gray-700 after:top-11 after:left-1/2 after:-translate-x-1/2 after:rotate-45

原因说明 #

用border实现的三角伪元素，设置left: 1/2只是把伪元素的左边缘定位到容器的水平中点，但伪元素本身有实际尺寸（由border-4决定），所以整体会向右偏移半个自身宽度。添加-translate-x-1/2后，伪元素会向左移动自身宽度的50%，刚好让三角的中心点对齐容器的水平中点，实现完美居中。

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