CSS实现一条水平线上的标题居中

如图，一条线上的标题

很多地方都可以看到这样的标题，1px的线条和文字标题在中间样式的效果图，今天整理了一下，给需要的朋友

  .main {
    color: #333;
    height: 80px;
    position: relative;
    margin: 0 25px;
  }

  .text {
    background: #fff;
    height: 30px;
    width: 140px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    margin-top: -11px;
    margin-left: -70px;
  }

  .line {
    position: absolute;
    top: 55%;
    width: 100%;
    height: 1px;
    background: #f2f2f2 center center;
  }
  
  <div class="main">
    <div class="text">请选择登录公司</div>
    <div class="line"></div>
  </div>

在手机电脑上都适用，有更好的实现方法可以来讨论哦