CSS/HTML5的大小問題

我目前正在一個小型網站上工作。我有關於幾個問題的定位，大小，我的一些按鈕的排列...CSS/HTML5的大小問題

我想我的箱子永遠停留在屏幕中心（✔）。
我想有一個自適應按鈕方案，以便它們在窗口變得足夠小時彼此堆疊在一起。目前，它們全部捆綁在一起，並且一旦頁面達到特定尺寸時不可讀（如下所示）。
我想我的註冊文本在我的兩個按鈕的底部。它目前在他們的右邊。另外，當窗口的大小在一定範圍內時，箱子需要放在彼此的旁邊而不是在旁邊，我希望我的註冊文本可以沿着第二個方框走下去。下面我會分享我的代碼（html & CSS），我會發送網站當前狀態的圖片。

在此先感謝。

CSS代碼

body{ 
    margin-top: 300px; 
    text-align: center; 
} 


.ownerButton, .employeeButton { 
    background-color: #333; 
    text-align: center; 
    text-decoration: none; 
} 



.ownerButton, .employeeButton { 
    font-family: "georgia", sans-serif; 
    font-size: 24px; 
    padding: 1em 2em; 
    margin: 3px; 
    border: 0; 
    outline: 0; 
    color: #000000; 
    background-color: #2196F3; 
    text-transform: uppercase; 
    border-radius: 0.15em; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 

    font-weight: bold; 

    overflow: hidden; 
    position: relative; 
} 

.footer{ 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 100%; 

    background-color: #2196F3; 
    text-align: center; 
}

HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
     <title>Belper</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body bgcolor=#4286f4> 

     <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a> 
     <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a> 

     <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a> 

     <div class="footer"> 
     <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p> 
     </div> 

    </body> 
</html>

Image while window is large

Image while window is small

來源

2017-10-05 Larocque