[Résolu] Centrer une icon entre 2 barres horizontales

Bonjour,
Je n'arrive pas à centrer verticalement et horizontalement mon icône cercle/point sur la barre horizontale (j'ai mis une image en pièce jointe). Voici mon code :

#bar {
height: 1px;
background-color: #000;
width: 15%;
bottom: 30px;
margin-left: 360px;
margin-top: 10px;
}

.bluePoint1 {
font-size: 3.75rem;
color: #5CABD1;
background-color: #fff;
margin-left: 20px;
margin-top: 10px;
}

.subtitle {
display: flex;
align-items: center;
}
<h1>SERVICES</h1>
<span class="subtitle">
<div id="bar"></div>
<span class="bluePoint1">&bull;</span>
</span>

Merci pour votre aide

Bonjour bouggy,

Cite "j'ai mis une image en pièce jointe"
Pas d'image jointe

Bonjour bouggy,

Voici un exemple avec tiret et rond 100% Css
https://codepen.io/Zonecss/pen/aYjBMz