根据内容自适应尺寸

main {
            width: 300px;
            height: 300px;
            background-color: #2aabd2;
        }

        span {
            display: block;
            width: fit-content;
            height: 100px;
            background-color: red;
            margin: auto;
        }
<main>
    <span>fafdfasdfsaf</span>
</main>
这里要特别说明一下，span标签的display样式如果换为inline-block是不能显示居中效果的，换为inline也不能显示居中效果,换为block就可以，这个在项目中可以用到，之前都是盒子套盒子完成这种效果的。