diff --git a/src/assets/css/components/common/fit-center.scss b/src/assets/css/components/common/fit-center.scss
index fd07971..b4818fc 100644
--- a/src/assets/css/components/common/fit-center.scss
+++ b/src/assets/css/components/common/fit-center.scss
@@ -4,4 +4,12 @@
   align-items: center;
   width: 100%;
   height: 100%;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.direction-vertical {
+  flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index 9bb4a35..356ab8d 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -1,13 +1,21 @@
 import React from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-const FitCenter: React.FC<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = (props) => {
-    const { className, ..._props } = props
+interface FitCenterProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    vertical?: boolean
+}
+
+const FitCenter: React.FC<FitCenterProps> = (props) => {
+    const { className, vertical, ..._props } = props
     return (
         <>
-            <div className={`fit-center${className ? ' ' + className : ''}`} {..._props}></div>
+            <div
+                className={`fit-center${className ? ' ' + className : ''}${
+                    vertical ? ' direction-vertical' : ' direction-horizontal'
+                }`}
+                {..._props}
+            ></div>
         </>
     )
 }