dispaly:flex自适应布局实现两边横线，中间文字

昨天记录了一下自适应布局，现在记录下它的一个简单应用：实现两边横线，中间文字

代码特别简单

<div class="line">
            <hr/>第三方登录<hr />
        </div>

设置父元素DIV高度为零，行高为零，为了居中 

.line {
            margin-top: 30px;
            display: flex;
            height: 0;
            line-height: 0;
            font-size: 14px;
            color: #666;
        }
        
        div.line>hr {
            flex: 1;
        }

效果如下：也是自适应分辨率的