Center images when not using 100% width

docs/syntax/images.md

@@ -34,6 +34,24 @@ Or, use the `image` directive.
 :width: 250px
 :::
 
+### Image centering
+
+Images that are not full width are automatically centered within their container. This is particularly useful when you specify a width constraint:
+
+```markdown
+:::{image} /syntax/images/apm.png
+:alt: APM Logo
+:width: 200px
+:::
+```
+
+:::{image} /syntax/images/apm.png
+:alt: APM Logo
+:width: 200px
+:::
+
+The image above is centered because it has a width of 200px, which is less than the full container width.
+
 ## Screenshots
 
 Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive.

src/Elastic.Documentation.Site/Assets/markdown/images.css

@@ -3,10 +3,10 @@
 		a.image-reference {
 			@apply mt-4 block align-middle;
 			& > img {
-				@apply block;
+				@apply mx-auto block;
 			}
 		}
-		/* 
+		/*
 		 * tailwind reset makes all images `display: block`
 		 * this resets it to `display: initial`
 		 */