html与css如何实现中间有文字的分割线效果

如果是固定宽高的div，固定宽高的文字，实现这个效果不难。但是如果把它拿到另一个地方用的时候再调节外围div和文字内容、文字大小的时候，居中效果、分割线的宽度完全乱了，再去一点一点的调节各种数字就不合适了。使用flex能比较灵活的实现这个效果。

html

1、按照上述要求，编写最魑徒扮阙简单的html结构<div class="box"> <span class="line"></span> <span class="text">我的文字</span> <span class="line"></span></div>

2、box类设置单行水平对齐方式:两端对齐justify-content: space-between;

4、设置div的长宽和背景 height: 40px; width: 300px; background-color: wheat;

3、分割线右宽度了，现在基本实现了效果，所有css代码如下.box { height: 40px; width: 300px; background-color: wheat; display: flex; justify-content: space-between; align-items: center;}.line { height: 2px; flex-grow: 1; background-color: red;}