diff --git a/src/assets/css/site.css b/src/assets/css/site.css
index f6326f4c9e..38e056df89 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@@ -133,3 +133,13 @@ div[data-role=page] {
 .w-100 {
     width: 100%;
 }
+
+.margin-auto-x {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.margin-auto-y {
+    margin-top: auto;
+    margin-bottom: auto;
+}
diff --git a/src/forgotpassword.html b/src/forgotpassword.html
index d4ed0d4170..80631564f8 100644
--- a/src/forgotpassword.html
+++ b/src/forgotpassword.html
@@ -1,5 +1,5 @@
 <div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage">
-    <div>
+    <div class="padded-left padded-right padded-bottom-page">
         <form class="forgotPasswordForm" style="text-align: center; margin: 0 auto;">
             <div style="text-align: left;">
                 <h1>${HeaderForgotPassword}</h1>
diff --git a/src/forgotpasswordpin.html b/src/forgotpasswordpin.html
index 3b1ba0d37b..ef915be788 100644
--- a/src/forgotpasswordpin.html
+++ b/src/forgotpasswordpin.html
@@ -1,5 +1,5 @@
 <div data-role="page" class="page standalonePage forgotPasswordPinPage">
-    <div>
+    <div class="padded-left padded-right padded-bottom-page">
         <form class="forgotPasswordPinForm" style="text-align: center; margin: 0 auto;">
             <div style="text-align: left;">
                 <h2>${HeaderPasswordReset}</h2>
diff --git a/src/login.html b/src/login.html
index fd52b4bf58..458ac7df3b 100644
--- a/src/login.html
+++ b/src/login.html
@@ -1,6 +1,6 @@
-<div id="loginPage" data-role="page" class="page standalonePage flex flex-direction-column align-items-center justify-content-center" data-backbutton="false">
-    <div class="padded-left padded-right padded-bottom-page">
-        <form class="manualLoginForm hide">
+<div id="loginPage" data-role="page" class="page standalonePage flex flex-direction-column" data-backbutton="false">
+    <div class="padded-left padded-right padded-bottom-page margin-auto-y">
+        <form class="manualLoginForm margin-auto-x hide">
             <div class="padded-left padded-right flex align-items-center justify-content-center">
                 <h1 class="sectionTitle">${HeaderPleaseSignIn}</h1>
             </div>
diff --git a/src/selectserver.html b/src/selectserver.html
index 3318a6b80e..0a14e7fa03 100644
--- a/src/selectserver.html
+++ b/src/selectserver.html
@@ -1,15 +1,17 @@
-<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidthContent vertical flex flex-direction-column align-items-center justify-content-center">
-    <div class="verticalSection flex-shrink-zero w-100 flex flex-direction-column">
-        <div class="padded-left padded-right flex align-items-center justify-content-center">
-            <h1 class="sectionTitle sectionTitle-cards">${HeaderSelectServer}</h1>
+<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidthContent vertical flex flex-direction-column">
+    <div class="margin-auto-y">
+        <div class="verticalSection flex-shrink-zero w-100 flex flex-direction-column">
+            <div class="padded-left padded-right flex align-items-center justify-content-center">
+                <h1 class="sectionTitle sectionTitle-cards">${HeaderSelectServer}</h1>
+            </div>
+            <div class="padded-top padded-bottom-focusscale flex-grow flex" data-horizontal="true" data-centerfocus="card">
+                <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>
+            </div>
         </div>
-        <div class="padded-top padded-bottom-focusscale flex-grow flex" data-horizontal="true" data-centerfocus="card">
-            <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>
+        <div class="padded-top padded-left padded-right flex flex-shrink-zero justify-content-center verticalSection flex-wrap-wrap margin-auto-x">
+            <a is="emby-linkbutton" href="addserver.html" class="raised cancel btnAddServer flex-shrink-zero" style="margin: .25em;">
+                <span>${ButtonAddServer}</span>
+            </a>
         </div>
     </div>
-    <div class="padded-top padded-left padded-right flex flex-shrink-zero justify-content-center verticalSection flex-wrap-wrap" style="margin-left:auto;margin-right:auto;">
-        <a is="emby-linkbutton" href="addserver.html" class="raised block cancel btnAddServer flex-shrink-zero" style="margin: .25em;">
-            <span>${ButtonAddServer}</span>
-        </a>
-    </div>
 </div>