CSS是一種用于網頁樣式設計的語言。它可以允許我們控制網頁上的元素，包括文字、圖像和容器的大小、位置、顏色和樣式等等。在許多情況下，我們需要控制兩個以上的元素，使其同時移動。下面我們將介紹一種方法，使用CSS控制兩個div同時移動。

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

上面的代碼展示了一個包含兩個div的容器。這里的其中一個div（box1）是紅色的，而另一個div（box2）是藍色的，我們將同時移動這兩個div。

.container {
position: relative;
width: 100%;
height: 200px;
}
.box1, .box2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
left: -140px;
}
.box2 {
background-color: blue;
right: -140px;
}

我們使用CSS將其放置在容器中，并將其設置在容器的正中心。.box1和.box2都設置了絕對定位，并使用transform屬性垂直居中，我們可以使用top:50%和transform:translateY(-50%)來實現(xiàn)。我們還將兩個div的寬度和高度設置為100px，讓它們看起來一樣大小。

我們分別為.box1和.box2設置了不同的背景顏色，以區(qū)分它們。但是，我們將.box1放置在容器的左側，而.box2放置在容器的右側。我們可以通過left和right屬性來實現(xiàn)這一點。

.container:hover .box1, .container:hover .box2 {
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

這里的關鍵是:hover偽類，它允許我們定義容器中兩個div的行為。當鼠標懸停在.container上時，我們希望.box1和.box2都移動到容器的中心。我們可以使用left:50%將它們水平移動到容器的中心，然后使用transform:translateX(-50%)和transform:translateY(-50%)重新將它們垂直居中。

這就是我們如何使用CSS控制兩個div同時移動。這種方法具有足夠的靈活性，可以用于多種情況。如果您對移動元素感興趣，那么您應該花時間研究關于CSS移動元素的更多內容。