CSS是網頁設計中的關鍵技術之一，它可以讓網頁更加美觀、易讀、易用。其中，div是CSS中非常常用的標簽，它可以讓我們在網頁中靈活地布局和排版。但是，有時候我們想在兩個div之間加一條豎線，讓網頁更加美觀和清晰。那么，該如何實現呢？接下來，我們就來學習一下如何在兩個div之間添加豎線，并使其居中。

/* CSS代碼 */
/* 設置父元素為flex布局 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 設置左邊的div */
.left {
width: 50%;
height: 200px;
background-color: #f0f0f0;
}
/* 設置豎線 */
.line {
width: 1px;
height: 100%;
background-color: #ccc;
}
/* 設置右邊的div */
.right {
width: 50%;
height: 200px;
background-color: #f0f0f0;
}

我們首先將父元素的display屬性設置為flex，這樣就可以控制子元素的布局。我們將justify-content屬性設置為center，這樣可以使子元素在水平方向上居中。同時，我們將align-items屬性設置為center，這樣可以使子元素在垂直方向上居中。這樣，我們就可以將豎線居中顯示。

接下來，我們設置左邊的div的寬度為50%，這樣就可以保證左右兩個div平分容器的寬度。我們將左邊的div的高度設置為200px，并設置其背景色為#f0f0f0。同樣，我們設置右邊的div的寬度為50%，高度為200px，并設置背景色為#f0f0f0。

最后，我們來設置豎線的樣式。我們將其寬度設置為1px，高度設置為100%。注意：豎線的高度要設置為100%，這樣才能使其與父元素同高度。我們將豎線的背景色設置為#ccc，這樣就可以使豎線與網頁背景色有所區別，更加清晰明了。

到此，我們就實現了在兩個div之間添加豎線，并讓其居中的效果。