<form> <label for="number">编号:</label> <input type="text" id="number" name="number" required> <label for="username">姓名:</label> <input type="text" id="username" name="username" required> <button type="button">login</button> </form> 让表单在右侧居中

可以使用 flex 布局来实现表单在右侧居中，具体操作如下：

HTML 代码：

<div class="container">
  <form>
    <label for="number">编号:</label>
    <input type="text" id="number" name="number" required>
    <label for="username">姓名:</label>
    <input type="text" id="username" name="username" required>
    <button type="button">login</button>
  </form>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: flex-end; /* 将表单放在右侧 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

form {
  display: flex;
  flex-direction: column; /* 将表单元素纵向排列 */
  align-items: flex-end; /* 将表单元素放在容器右侧 */
  width: 300px; /* 设置表单宽度 */
}

效果如下：