.filed-head {
    display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
    position: relative;   /*定位横线（当横线的父元素）*/
}

.filed-head:before, .filed-head:after {
    content: '';                 /*CSS伪类用法*/
    position: absolute;         /*定位背景横线的位置*/
    top: 52%;
    background: #494949;       /*宽和高做出来的背景横线*/
    width: 19%;
    height: 2px;
}

.filed-head:before{
    left: 25%;        /*调整背景横线的左右距离*/
}

.filed-head:after {
    right: 25%;
}

.filed-head2 {
    margin-top: 30px;
    display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
    position: relative;   /*定位横线（当横线的父元素）*/
}

.filed-head2:before, .filed-head2:after {
    content: '';                 /*CSS伪类用法*/
    position: absolute;         /*定位背景横线的位置*/
    top: 52%;
    background: #494949;       /*宽和高做出来的背景横线*/
    width: 15%;
    height: 2px;
}

.filed-head2:before{
    left: 23%;        /*调整背景横线的左右距离*/
}

.filed-head2:after {
    right: 23%;
}

.filed-head3 {
    margin-top: 30px;
    display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
    position: relative;   /*定位横线（当横线的父元素）*/
}

.filed-head3:before, .filed-head3:after {
    content: '';                 /*CSS伪类用法*/
    position: absolute;         /*定位背景横线的位置*/
    top: 52%;
    background: #494949;       /*宽和高做出来的背景横线*/
    width: 11%;
    height: 2px;
}

.filed-head3:before{
    left: 23%;        /*调整背景横线的左右距离*/
}

.filed-head3:after {
    right: 23%;
}