使用Bootstrap5制作居中美观卡片式登录表单的问题求助

你现有代码无法实现目标效果的核心原因有4点：

• 仅实现了水平居中，没有做垂直方向的视口居中，卡片默认贴在页面顶部
• 卡片组件没有加阴影、内边距、圆角优化，默认样式过于简陋
• 使用了Bootstrap5已废弃的form-group类，依赖<br>硬换行控制间距，样式不统一
• 布局拆成了两个独立container，消息区和表单分散，整体视觉不连贯

修正后可直接使用的模板代码 #

<div class="container min-vh-100 d-flex flex-column justify-content-center py-4">
    <!-- 消息提示区 -->
    <div class="text-center mb-4">
        {% for message in messages %}
        <h5 class="text-danger">{{ message }}</h5>
        {% endfor %}
    </div>

    <div class="row justify-content-center">
        <div class="col-sm-10 col-md-6 col-lg-4">
            <!-- 卡片样式优化 -->
            <div class="card shadow border-0 rounded-4 p-4">
                <div class="card-body p-0">
                    <h3 class="text-center mb-4 fw-bold text-primary">账号登录</h3>
                    <form method="POST" action="{% url 'login' %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label text-primary fw-medium">Enter Username</label>
                            <input type="text" class="form-control form-control-lg rounded-3" name="username">
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label text-primary fw-medium">Enter Password</label>
                            <input type="password" class="form-control form-control-lg rounded-3" name="password">
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg rounded-3">Login</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

• 居中实现：给最外层容器添加min-vh-100 d-flex flex-column justify-content-center类，让容器占满整个视口高度，内部内容自动垂直居中，配合row justify-content-center实现水平+垂直双居中效果
• 卡片美化：给card组件添加shadow实现柔和投影、border-0移除默认生硬边框、rounded-4设置大圆角、p-4增加内部留白，还原参考图的悬浮卡片质感
• 规范适配：移除Bootstrap5不再支持的form-group类，使用mb-3/mb-4等官方间距工具类控制元素边距，替换所有硬换行的<br>标签，代码更易维护
• 交互统一：输入框和按钮统一用大尺寸样式（form-control-lg/btn-lg）和圆角，按钮用d-grid容器包裹实现满宽效果，视觉上更协调
• 响应式优化：列宽设置多断点适配，手机、平板、桌面端都能有合适的卡片宽度，不会出现太宽或太窄的问题

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee