如何做一个有背景且文字居中的登录页面

首先，你需要一个带背景的容器，可以使用CSS的background属性设置背景图像或颜色，例如：

.container {
  background-image: url('background-image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

这个例子中，背景图片会被居中并覆盖整个容器。

接下来，你可以使用CSS的flexbox布局来居中文本。例如：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

这个例子中，`justify-content: center`将子元素在主轴上居中，`align-items: center`将子元素在交叉轴上居中，`flex-direction: column`将子元素垂直排列。

最后，你可以在容器中添加表单元素和其他文本，例如：

<div class="container">
  <h1>登录</h1>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <button type="submit">登录</button>
  </form>
</div>

这个例子中，`<h1>`元素显示“登录”文本，`<form>`元素包含用户名和密码的输入框以及登录按钮。

综上所述，你可以使用CSS的background属性和flexbox布局来创建一个背景和文本都居中的登录页面。