place-items revert in chrome 58

src/features/Login/Login.vue

@@ -178,7 +178,8 @@ export default {
 .header {
   min-height: 120px;
   display: grid;
-  place-items: center;
+  align-items: center;
+  justify-items: center;
 }
 
 .center {

src/features/OnlineExam/Examing/ArrowNavView.vue

@@ -82,7 +82,8 @@ export default {
 .arrow-container {
   display: grid;
   grid-template-columns: 120px 1fr 120px;
-  place-items: center;
+  align-items: center;
+  justify-items: center;
 
   border-top: 1px solid #eeeeee;
 }
@@ -90,6 +91,7 @@ export default {
 .tips,
 .next {
   display: grid;
-  place-items: center;
+  align-items: center;
+  justify-items: center;
 }
 </style>

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -18,7 +18,7 @@
         <FaceRecognition v-if="faceEnable" width="100%" height="100%" :showRecognizeButton="false" />
       </div>
     </div>
-    <Modal v-model="showFaceId" :mask-closable="false" :closable="false">
+    <Modal v-model="showFaceId" :mask-closable="false" :closable="false" width=700 :styles="{top: '20px'}">
       <FaceId v-if="showFaceId" @closeFaceId="closeFaceId" />
       <p slot="footer">
       </p>
@@ -382,7 +382,8 @@ export default {
 
 .header {
   display: grid;
-  place-items: center;
+  align-items: center;
+  justify-items: center;
   grid-template-columns: 200px 1fr 300px 100px;
   grid-area: header;
   height: 80px;

src/features/OnlineExam/Examing/OverallProgress.vue

@@ -38,7 +38,8 @@ export default {
   display: grid;
   justify-self: flex-start;
 
-  place-items: center;
+  align-items: center;
+  justify-items: center;
   grid-template-columns: 200px 50px;
   width: 250px;
 }

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -103,7 +103,8 @@ export default {
 <style scoped>
 .section {
   display: grid;
-  place-items: flex-start;
+  align-items: flex-start;
+  justify-items: flex-start;
   margin: 0 20px;
   margin-bottom: 20px;
 }