如果是固定宽高的div，固定宽高的文字，实现这个效果不难。但是如果把它拿到另一个地方用的时候再调节外围div和文字内容、文字大小的时候，居中效果、分割线的宽度完全乱了，再去一点一点的调节各种数字就不合适了。使用flex能比较灵活的实现这个效果。
实现如下图的文字与分割线的效果。
需要4个元素，最外层的div、左分割线、右分割线、中间的文字。
最外层的div，它的宽度和高度可以自由设置，里面的文字自动左右居中、垂直居中，分割线垂直居中，并且分割线被文字打断。
按照上述要求，编写最简单的html结构
我的文字
首先使用flex布局
搜索flex，打开阮一峰老师的文章作为参考。
box类增加display: flex;
接下来参考这篇文章一点一点的增加内容。
box类设置单行水平对齐方式:两端对齐
justify-content: space-between;
box类设置垂直居中方式：
align-items: center;
设置div的长宽和背景
height: 40px;
width: 300px;
background-color: wheat;
到现在，css内容为这样
.box {
height: 40px;
width: 300px;
background-color: wheat;
display: flex;
justify-content: space-between;
align-items: center;
}
设置分割线的高度为2px，背景色为红色
.line {
height: 2px;
background-color: red;
}
发现没有变化，这是因为现在分割线的宽度为0；
这时参考文章中子元素宽度的设置方法。增加分割线的宽度放大比例
flex-grow: 1;
分割线右宽度了，现在基本实现了效果，所有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;
}
就像对外围div的长宽、定位等设置都不会影响居中等效果一样，设置文字的大小边框外间距，改变文字长度等等也不必担心这些影响。
对文字，我只增加一个使得文字与线之间有一定间距不至于过于拥挤
margin: 0 5px;
至此，所有代码完成
我的文字
.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;
}
.text {
margin: 0 5px;
}
