A melhor solução é usar [Flexbox][1], vai te poupar muito trabalho em ficar calculando o posicionamento interno dos elementos e tornar seu `HTML` mais simples. [Ver navegadores que suportam][2].

Você pode criar dois elementos `<span>` (um antes e outro depois) da tag onde ficará o título. Ou então adotar uma solução mais elegante utilizando os pseudo-elementos `::after` e `::before` das CSS3 para fazer as linhas, visto que elas não tem relevância para página pois trata somente de algo visual.

Mostrarei com as tags `<span>` e a ideia de `Flexbox`, mais pra frente eu edito a minha resposta com outras alternativas. Sua marcação ficará assim:

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    *{box-sizing:border-box;margin:0;padding:0}

    header {
        background:url(https://i.sstatic.net/DGejA.jpg)
                   center center fixed;
        background-size:cover;
        height: auto;
        padding: 10% 10px;
        width: 100%;
        
        /* flexbox */
        display: -webkit-flex;
                display: flex;
        /* comportamento: em linha com wrap */
        -webkit-flex-flow: row wrap;
                flex-flow: row wrap;
      
        /* conteúdo justificado no centro */
        -webkit-justify-content: center;
                 justify-content:center;
    }

    span, h2 {
        -webkit-flex: 1 0 auto;
                flex: 1 0 auto;
    }

    .line {
        background: #fff;
        margin-top:12px;
        height: 4px;
        width: auto /* tcharam! */
    }

    h2 {
        color: #fff;
        text-align:center;
    }

<!-- language: lang-html -->

    <header>
        <span class='line'></span>
        <h2 class='title'>Título pequeno?</h2>
        <span class='line'></span>
    </header>

<!-- end snippet -->

É claro, não confie somente nessa regra. Não sei como está o seu CSS mas chegará em uma resolução pequena que você precisará tratar os `breakpoints` corretamente.

Para provar que o `Flexbox` funciona muito bem, por que não testar um título maior?

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

    /* É o mesmo CSS, minificado */

    *{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover fixed;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}

<!-- language: lang-html -->

    <header>
        <span class='line'></span>
        <h2 class='title'>Olá, você me acha um título muito grande?</h2>
        <span class='line'></span>
    </header>

<!-- end snippet -->
----------

Execute o bloco de código em tela cheia. Se estiver no Firefox, use o atalho <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>m</kbd> para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada.


  [1]: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
  [2]: http://caniuse.com/#feat=flexbox
  [3]: https://i.sstatic.net/FFTx9.jpg