Centrer du texte dans un <hr>

Comment intègreriez-vous le visuel suivant ?

Les arômes du vin

Le trait horizontal nous rappelle probablement l’élément <hr>, après tout il signifie horizontal rule qui se traduit par… trait horizontal ! Mais il ne peut pas être utilisé pour deux raisons :

Notre visuel évoque plutôt un titre de niveau un. Le HTML approprié serait donc

<h1 class="hr">Les arômes du vin</h1>

Ainsi le style ne dépend que de la classe hr. Nous allons utiliser une bordure sur les pseudo-éléments ::before et ::after pour tracer les deux parties du trait. Il faudra ensuite faire en sorte que ces derniers se partagent la largeur restante tout en étant verticalement centrés par rapport au texte. Tout ceci, flexbox le permet !

.hr {
    /* centre verticalement les enfants entre eux */
    align-items: center;

    /* active flexbox */
    display: flex;

    /* garde le texte centré s’il passe sur plusieurs lignes ou si flexbox n’est pas supporté */
    text-align: center;
}

.hr::before,
.hr::after {
    /* la couleur est volontairement absente ; ainsi elle sera celle du texte */
    border-top: .0625em solid;

    /* nécessaire pour afficher les pseudo-éléments */
    content: "";

    /* partage le reste de la largeur disponible */
    flex: 1;

    /* espace les traits du texte */
    margin: 0 .5em;
}

Cette solution est simple, courte, polyvalente, responsive, et se dégrade gracieusement en plus d’un support déjà excellent. Faites vous une faveur et utilisez la !