使用CSS畫出十字非常簡單，只需要用到一些基本的CSS屬性，就可以實現。

.cross {
width: 100px;
height: 100px;
position: relative;
}
.cross::before,
.cross::after {
content: '';
position: absolute;
top: 50%;
left: 0;
background-color: #000;
}
.cross::before {
height: 2px;
width: 100%;
transform: translateY(-50%);
}
.cross::after {
height: 100%;
width: 2px;
transform: translateX(-50%);
}

以上代碼中，我們首先創建了一個具有相對定位的容器，它的寬高都是100px。

然后，我們用偽元素`::before`和`::after`來創建橫線和豎線。偽元素作為普通元素的一個虛擬擴展，是不需要在HTML源代碼中添加的，而可以直接通過CSS來創建。注意到`::before`和`::after`的`content`屬性被設置為空字符串，這是因為偽元素是沒有實際的內容的。

為了使橫線居中，我們將它的頂部設置為50%，然后使用`translateY(-50%)`把它向上移動一半高度。

為了使豎線居中，我們將它的左側設置為50%，然后使用`translateX(-50%)`把它向左移動一半寬度。

最后，我們設置橫線和豎線的顏色和尺寸。

這樣，我們就成功地用CSS畫出了一個十字。