我已经为你做了一个JSfiddle here (click me please)，它类似于你添加的图片。
按照要求，不要使用第三方，就像我在这里添加的代码：
HTML

<div id="login">
  <form action = "login.php" id="login" method ="POST">
    <div class="picture">

    </div>
    <p>Username</p>
    <input type="text" name="username" id="username" required /><br /><br />
    
    <p>Password</p>
    <input type ="password" name="password" id="password" required /><br /><br />

    <input type="submit" name="submit" value="Log in">
  </form> 
</div>

字符串
CSS

body
{
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}

#login
{
    text-align:center;
    width: 50%;
    margin: 0 auto;
}
.picture
{
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color:red;
  margin: 0 auto;
}
#login p
{
  float: left;
}
input[type=text], input[type=date], input[type=password] {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

型

**编辑：**新提琴在这里：https://jsfiddle.net/gay1ufa1/2/

我已经改进了你的HTML。所有的表单输入都应该有一个相关的label元素。也不要使用br作为间距，而是使用padding/margin。
此外，使用重复的id，id必须是唯一的页面。

#login_container  /*This is Our base container for the login "control" */
{
  width:30%; /*Define the width of the control*/
  margin:auto; /*This Provide the horizontal centering of the control*/
  padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
  background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
  background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
  background-repeat:no-repeat; /*One Bil Murray is more than enough*/
  background-color: #F0F0F0; /*Base Background image*/
}

#login_container label
{
  display:block;  /*Label will now take up a whole line*/
  margin-bottom:.25em; /*Give it some room underneath*/
}

#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
  width:100%; /*Form controls now take 100% width of the container*/
  margin-bottom:0.5em;
}

个字符

你的代码中有一个问题是你使用了两次ID“login“，这是绝对不能做的。我整理了一个codepen，你可以在这里找到：
http://codepen.io/anon/pen/dNWQgp
我基本上做了什么（除了添加一个代表图片的div）：我将以下CSS分配给整个表单和图像的 Package 器DIV。它使用flexbox来集中内容。另外，我将form设置（40%）分配给form元素。

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

字符串

要使div居中，请将margin-left和margin-right设置为auto，并为其分配固定的width。在您的情况下，这将用于#login。

最小的跳转开始模板，使用CSS flex：

body {background:darkblue;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:space-around;font-size:large}
#container {width:30%;margin:auto;padding:2em;background-color:#F0F0F0;border-radius: 0.5em}
#container input {margin:0.5em 0 1em 0;height: 2em;padding: 0.5em;width:calc(100% - 1.5em);font-weight:bold}
#container input[type="submit"] {cursor:pointer;font-size:larger;margin:0.5em 0 0 0;padding:0.2em;width:100%}

个字符
在CSS中更进一步，同时保持它相当小。emoji图标是Unicode字符，取自Unicode 15.1 https://www.unicode.org/emoji/charts-15.1/emoji-style.txt

body {background:darkblue;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:space-around;font-size:large}
.logo {
  height: 7em;
  max-height: 7em;
  max-width: 7em;
  background: #272b2d;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.8em' font-size='100'>🧔🏻‍♂️</text></svg>");
  background-size: cover;
  border-radius: 7em;
  border: 0.5em deepskyblue solid;
  transition: transform .7s ease-in-out;
  margin: 0 auto 1em auto
}
.logo:hover {transform: rotate(360deg);cursor:crosshair}
#container {width:12em;margin:auto;padding:2em;background-color:#F0F0F0;border-radius: 0.5em;min-width:12em;max-width:12em;transition: all 0.5s ease-in}
#container:hover {box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 50px}
#container input {margin:0.5em 0 1em 0;height: 2em;padding: 0.5em;width:calc(100% - 1.5em);font-weight: bold}
#container input[type="submit"] {cursor:pointer;font-size:larger;margin:0.5em 0 0 0;padding:0.2em;width:100%}

<!DOCTYPE html>
<meta charset=utf-8>
<title>DB</title>
<body>
  <div id="container">
    <div class="logo"></div>
    <form action = "login.php" id="login" method ="POST">
       <label for="username">Username </label>
       <input type="text" name="username" id="username" required />
       <label for="password">Password</label>
       <input type ="password" name="password" id="password" required />
       <input type="submit" name="submit" value="Log in">
       <br><br>
       <a href="#">Register account</a>
    </form>
  </div>
</body></html>

的数据