CSS水平居中溢出文字

有时候我们的盒子比内容文字的宽度窄，并且想要实现文字的居中效果。也就是文字对称地超出盒子的两边。用text-align: center是无效的。因为它只在盒子边框大于内容时生效。应该使用display: flex;justify-content: center;

<style>
    div{
        position: absolute;
        left: 400px;
        top: 100px;
        width: 20px;
        height: 20px;
        outline: red solid 1px;
        white-space: nowrap;
        
        display: flex;
        justify-content: center;
    }
</style>

<div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>