CSS虛線框是一種常見的UI設計元素，可以用來標記元素的邊框或者作為點擊效果的顯示。不過，如果虛線框沒有居中對齊，會顯得很不美觀，下面我將介紹如何用CSS實現虛線框的居中對齊。

.box {
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed gray;
}

上面的代碼使用了flex布局來實現居中對齊。具體來說，justify-content屬性用于水平對齊，這里設置為center居中對齊；align-items屬性用于垂直對齊，同樣設置為center。然后，我們在.box類上添加1像素的虛線邊框，顏色為灰色（gray）。

通過這種方法，無論.box容器的大小變化，都能實現虛線框的居中對齊。下面是一個完整的示例代碼：

.box {
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed gray;
width: 200px;
height: 100px;
}

在上面的代碼中，我們設置了.box容器的寬度為200像素，高度為100像素，這樣可以更清晰地看到虛線框效果。你可以根據實際需求來調整寬高。

總結：

通過使用CSS的flex布局，我們可以輕松地實現虛線框的居中對齊。代碼簡潔清晰，易于維護，是Web開發中常用的技巧之一。