add center

src/assets/main.css

@@ -25,7 +25,7 @@ body {
 .content-block {
   margin-top: 70px;
   padding: 10px;
-  background-color: #333333;
+  /* background-color: #553333; */
 }
 
 @media (min-width: 1024px) {
@@ -33,4 +33,9 @@ body {
     width: 700px;
     margin: 70px auto 0 auto;
   }
+
+  .center-middle-block-custom {
+    display: grid;
+    place-items: center;
+  }
 }

src/components/GamesPage.vue

@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="games" />
 
+    <div class="center-block-custom content-block">
         Игры
+    </div>
 </template>
 
 <style scoped></style>

src/components/LoginPage.vue

@@ -52,6 +52,7 @@ async function signup() {
 </script>
 
 <template>
+  <div class="center-block-custom content-block center-middle-block-custom height100">
     <n-card style="margin-bottom: 16px" class="sign-card">
       <n-tabs type="line" animated>
 
@@ -111,6 +112,7 @@ async function signup() {
 
       </n-tabs>
     </n-card>
+  </div>
 </template>
 
 <style scoped>
@@ -135,6 +137,10 @@ async function signup() {
   color: #63e2b7;
 }
 
+.height100 {
+  height: 80vh;
+}
+
 @media (min-width: 1024px) {
   .sign-card {
     width: 380px;

src/components/OfficePage.vue

@@ -21,6 +21,7 @@ getPermissions()
 <template>
     <HeaderMenu :add-logout="true" active="office" />
 
+    <div class="center-block-custom content-block">
         <p>
             Доброго времени суток, {{ authStore.username }}.
         </p>
@@ -29,6 +30,7 @@ getPermissions()
         </p>
 
         {{ permissions }} -->
+    </div>
 </template>
 
 <style scoped></style>

src/components/ScenariosPage.vue

@@ -5,7 +5,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="scenarios" />
 
-    <div class="center-block-custom">
+    <div class="center-block-custom content-block">
         Сценарии
     </div>
 </template>

src/components/UsersPage.vue

@@ -5,7 +5,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 <template>
     <HeaderMenu :add-logout="true" active="users" />
 
+    <div class="center-block-custom content-block">
         Пользователи
+    </div>
 </template>
 
 <style scoped></style>