fix(player): align video to center of provider container

mihar-22 · mihar-22 · commit 67fadf65bd90 · 2023-10-03T11:57:27.000+11:00
closes #936
diff --git a/packages/react/src/hooks/use-player-query.ts b/packages/react/src/hooks/use-player-query.ts
@@ -17,6 +17,12 @@ import { PlayerQueryList } from 'vidstack/local';
  * const matches = usePlayerQuery("(width < 680) and (streamType: on-demand)");
  * ```
  *
+ * You can also use media queries:
+ *
+ * ```ts
+ * const matches = usePlayerQuery("@media (min-width: 300px)");
+ * ```
+ *
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-player-query}
  */
 export function usePlayerQuery(query: string): boolean {
diff --git a/packages/vidstack/player/styles/base.css b/packages/vidstack/player/styles/base.css
@@ -35,12 +35,13 @@
  */
 
 [data-media-provider] {
+  display: flex;
   position: relative;
-  display: block;
   box-sizing: border-box;
 }
 
 :where([data-media-provider]) {
+  align-items: center;
   width: 100%;
 }
 
