fix(prejoin): Align avatar image on small screens (#7300)

Fixes: #7296

css/_premeeting-screens.scss

@@ -197,9 +197,16 @@
         text-align: center;
     }
 
+    .preview-avatar-container {
+        width: 100%;
+        height: 80%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     .avatar {
         background: #A4B8D1;
-        margin: 200px auto 0 auto;
     }
 
     video {

react/features/base/premeeting/components/web/Preview.js

@@ -54,11 +54,13 @@ function Preview(props: Props) {
             <div
                 className = 'no-video'
                 id = 'preview'>
-                <Avatar
-                    className = 'preview-avatar'
-                    displayName = { name }
-                    participantId = 'local'
-                    size = { 200 } />
+                <div className = 'preview-avatar-container'>
+                    <Avatar
+                        className = 'preview-avatar'
+                        displayName = { name }
+                        participantId = 'local'
+                        size = { 200 } />
+                </div>
             </div>
         );
     }