我的意思是怎么让他在界面显示的时候在正中央
时间: 2024-03-18 18:42:36 浏览: 16
要让表单在界面显示时居中,可以使用 CSS 来实现。您可以将 `<form>` 标签的外层容器设置为 flex 布局,并将其垂直和水平居中,如下所示:
```
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<form id="MyForm" name="MyForm" action="@Url.Action("SignIn", "Part3")" method="post">
<p>用户名:<input type="text" id="userName" name="userName" onblur="CheckUserName()" placeholder="请输入您的账号" /></p>
<p>密码:<input type="password" id="password" name="password" onblur="CheckPassword()" placeholder="请输入您的密码" /></p>
<input type="submit" class="btn-success" value="登录" />
</form>
</div>
```
这里将外层容器的高度设置为 100vh,表示占满整个视口的高度。然后使用 `display: flex` 将容器设置为 flex 布局,使用 `justify-content: center` 和 `align-items: center` 将容器内的子元素水平和垂直居中。这样,表单就可以在界面显示时居中了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)