你可以使用flexbox布局来实现内容居中。只需将表单包裹在一个容器内：
将以下CSS添加到你的样式表中：
.form-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 可选：设置垂直居中的最小高度 */
}
/* 按需添加表单的其他样式 */
.form {
/* 你现有的表单样式 */
}
下面是带有flexbox容器的修改后的Blade模板代码：
@extends('app')
@section('title', __('home.welcome.title'))
@section('content')
<div class="form-wrapper">
<div class="form">
<h1>@lang('common.login')</h1>
@if(Auth::check())
{{-- 当用户已验证时循环遍历用户 --}}
@foreach($users as $user)
{{-- 显示已验证用户的代码 --}}
@endforeach
@else
<div class="card">
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
<div class="form-group" style="max-width: 100%;">
<label for="email">@lang('common.email')</label>
<input type="email" name="email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="password">@lang('Password')</label>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
</form>
</div>
</div>
@endif
</div>
</div>
</div>
@endsection
