在HTML创建一个form,然后通过css将其置于页面中间
时间: 2023-12-04 21:02:51 浏览: 122
好的,以下是实现的步骤:
1. 首先,在HTML中创建一个form元素,例如:
```html
<form>
<!-- 在这里添加表单元素 -->
</form>
```
2. 给form元素添加一个class或id,例如:
```html
<form class="my-form">
<!-- 在这里添加表单元素 -->
</form>
```
3. 在CSS中定义该class或id的样式,将其置于页面中间,例如:
```css
.my-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
这个样式将表单元素的左上角定位在页面的中心点,然后使用transform属性将其水平和垂直移动到正中心。
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>居中的表单</title>
<style>
.my-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<form class="my-form">
<!-- 在这里添加表单元素 -->
</form>
</body>
</html>
```
这样,表单就被置于页面的中间了。
阅读全文