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

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

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

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

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

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

總結(jié)：

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