test vertical centering with svh

willashe · May 28, 2024 · ba3666b · ba3666b
1 parent 21f35c8
commit ba3666b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/app/(test)/test/layout.tsx b/src/app/(test)/test/layout.tsx
@@ -1,4 +1,4 @@
-import TestBannerBg from '@/components/TestBannerBg';
+import BgBanner from '@/components/BgBanner';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -10,7 +10,7 @@ export default function RootLayout() {
   return (
     <html lang="en">
       <body>
-        <TestBannerBg debug />
+        <BgBanner debug />
       </body>
     </html>
   );

diff --git a/src/components/TestBannerBg.tsx → src/components/BgBanner.tsx b/src/components/TestBannerBg.tsx → src/components/BgBanner.tsx
@@ -4,11 +4,11 @@ import { useEffect, useState } from 'react';
 
 import styles from './testcomponents.module.css';
 
-type BannerBgProps = {
+type BgBannerProps = {
   debug?: boolean;
 };
 
-export default function TestBannerBg({ debug }: BannerBgProps) {
+export default function TestBgBanner({ debug }: BgBannerProps) {
   const [orientation, setOrientation] = useState<{
     x: number;
     y: number;
@@ -32,7 +32,7 @@ export default function TestBannerBg({ debug }: BannerBgProps) {
 
   return (
     <>
-      <div className={styles['banner-bg']}>TEST</div>
+      <div className={styles['bg-banner']}>TEST</div>
       {debug ? (
         <div>
           {orientation?.x || 0}, {orientation?.y || 0}

diff --git a/src/components/testcomponents.module.css b/src/components/testcomponents.module.css
@@ -97,11 +97,13 @@
   }
 }
 
-.banner-bg {
+.bg-banner {
   position: absolute;
   height: 400px;
   width: 100vw;
   cursor: default;
+  top: 50svh;
+  transform: translateY(-50%);
   background: red;
 }