HTML表单居中的方法有很多，这里我们介绍一种常用的方法：使用CSS样式将表单居中，下面我们详细讲解如何实现这个效果。
创建一个HTML表单
我们需要创建一个简单的HTML表单，包括输入框、提交按钮等元素，以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单居中示例</title>
<style>
/* 这里是CSS样式 */
</style>
</head>
<body>
<div class="container">
<form action="">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
使用CSS样式将表单居中
要将表单居中，我们可以使用CSS的display属性和flexbox布局，在<style>标签内添加以下CSS样式：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使容器占满整个视口高度 */
}
这里的display: flex;表示将容器设置为弹性布局，justify-content: center;表示水平居中，align-items: center;表示垂直居中，height: 100vh;表示容器的高度为视口高度的100%。
优化样式
为了让表单看起来更加美观，我们还可以对CSS样式进行一些优化，可以添加一些边距和圆角，以及调整字体大小等，以下是一个优化后的示例代码：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 2px solid ccc;
border-radius: 5px;
padding: 20px;
}
相关问题与解答
1、如何让表单在移动端也能居中显示？
答：要让表单在移动端也能居中显示，可以使用媒体查询(media query)来针对不同设备尺寸设置不同的样式。
@media (max-width: 768px) {
.container {
width: 90%; /* 将容器宽度设置为屏幕宽度的90% */
}
}
2、如何让表单水平垂直都居中？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/215326.html
微信扫一扫 