docs: center flexbox example content on the cross axis

Add `align-items: center` to `.bd-example-content` so examples that turn the
wrapper into a flexbox (`d-flex`, `vstack`, `hstack`) center their items
horizontally, instead of sitting left in the tall min-height frame. Exclude
grid wrappers so grid items keep stretching to equal heights.
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index df0249d..baf44f8 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -102,6 +102,14 @@
     width: 100%;
     text-align: center;
 
+    // When an example turns the wrapper into a flexbox (`d-flex`, `vstack`,
+    // `hstack`), center its items on the cross axis too, so column layouts do
+    // not sit left in the tall min-height frame. Grid wrappers are excluded so
+    // grid items keep stretching to equal heights.
+    &:not([class*="grid"]) {
+      align-items: center;
+    }
+
     // Keep block-level components left-aligned inside. Only loose inline items
     // (buttons, badges, links, icons) pick up the centered text-align above.
     // Utilities still win via layer order, so `.text-center` etc. is unaffected.