<style>
.flex {
display: flex;
justify-content: center;
margin-top: 3em;
margin-bottom: 3em;
}
.login {
padding: 1em;
border: 3px solid gray;
border-radius: 1em;
background-color: plum;
}
form {
text-align: right;
}
.title {
font-size: large;
font-weight: bold;
text-align: center;
margin-bottom: 1em;
}
button {
margin-top: 1em;
}
</style>
<body>
<div class="flex">
<div class="login">
<div class="title">Login</div>
<form action="sample.php" method="post">
<div>
<label for="name">アカウント名 : </label>
<input type="text" id="name" name="name" required autofocus>
</div>
<div>
<label for="mail">メールアドレス : </label>
<input type="email" id="mail" name="mail" required>
</div>
<div>
<button type="submit">登録</button>
</div>
</form>
</div>
</div>
</body>