How to set image center?

How about adding .center class and creating Hugo Shortcodes. The following is a simple example.


.center class

.center {
  text-align: center;
}

Hugo shortcode layouts/shortcodes/image.html

{{ $src := .Get "src" }}
{{ $alt := .Get "alt" }}

<div class="center">
  <img
    src="{{ $src }}"
    alt="{{ $alt }}"
    decoding="async"
  />
</div>

Markdown

{{< image
src="images/sample.jpg"
alt="This is sample image" >}}