Vycentrování obrázku v HTML lze provést několika způsoby, přičemž nejlepším a nejmodernějším přístupem je použití CSS. Zde jsou nejčastější metody:

1. Nejlepší metoda: CSS Flexbox
Tato metoda vycentruje obrázek horizontálně i vertikálně uvnitř jeho kontejneru (např. div).

<div style="display: flex; justify-content: center; align-items: center;">
    <img src="obrazek.jpg" alt="Popis obrázku">
</div>

2. Klasická metoda: CSS display: block a okraje
Obrázek je ve výchozím stavu řádkový element (inline), proto na něj nefunguje margin: auto. Je třeba jej změnit na blokový element (block).

<img src="obrazek.jpg" alt="Popis" style="display: block; margin: 0 auto;">
display: block; – obrázek se chová jako odstavec a zabere celou šířku.
margin: 0 auto; – horní a dolní okraj je 0, levý a pravý se dopočítají automaticky. 

3. Pomocí CSS text-align: center na obalovém prvku
Pokud je obrázek uvnitř jiného elementu (např. <div> nebo <p>), můžete zarovnat obsah tohoto elementu na střed.

<div style="text-align: center;">
    <img src="obrazek.jpg" alt="Popis">
</div>

4. Zastaralá metoda (nedoporučuje se)
Použití tagu <center> je zastaralé a v moderním HTML5 by se nemělo používat. 

<center>
    <img src="obrazek.jpg" alt="Popis">
</center>

Doporučení: 
Použijte metodu č. 1 (Flexbox) nebo č. 2 (display: block) pro nejlepší výsledky a responzivitu webu.