想要移動(dòng)一個(gè)表單，我們需要使用 CSS 中的 position 屬性來控制表單的位置。position 屬性有四個(gè)取值，分別是 static、relative、fixed 和 absolute。

其中，static 是默認(rèn)值，表示元素正常的排列方式，不受 top、bottom、left 和 right 屬性的影響；relative 表示元素相對于其正常位置進(jìn)行相對移動(dòng)；fixed 表示元素固定在視口中的位置，不會(huì)隨頁面滾動(dòng)而移動(dòng)；absolute 表示元素相對于其包含元素的位置移動(dòng)。

.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 設(shè)置 form 元素相對于其包含元素進(jìn)行移動(dòng) */
.container {
position: relative;
}

上面的代碼演示了如何把一個(gè)表單元素相對于其包含元素進(jìn)行移動(dòng)，首先我們需要使用 position: relative; 把包含元素設(shè)置為相對定位，然后設(shè)置表單元素為絕對定位，使用 top、left 屬性控制表單元素的位置，使用 transform: translate(-50%, -50%); 把表單元素水平和垂直方向的偏移量設(shè)為其自身寬度和高度的一半，這樣表單元素就居中了。