效果图：
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css" />
<style>
html,
body {
background-color: #EDF0F5;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layui-card {
width: 520px;
height: 400px;
background-color: #fff;
padding: 60px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="layui-card">
<div class="layui-form-item" style="text-align: center;">
<h3>欢迎-登录</h3>
<!-- 登录结果-提示框 -->
</div>
<div class="layui-form-item">
<div class="layui-input-block layui-hide">
提示消息
</div>
</div>
<!-- 表单 -->
<form class="layui-form">
<div class="layui-form-item">
<label for="username" class="layui-form-label">账号名</label>
<div class="layui-input-block">
<input type="text" class="layui-input username">
</div>
</div>
<div class="layui-form-item">
<label for="password" class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" class="layui-input password">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="btn layui-btn "> 登 录 </button>
</div>
</div>
</form>
</div>
</body>
</html>
注：CSS部分
html,body {
background-color: #EDF0F5;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}