div和span是HTML中常見的標簽，用于布局和樣式調整。有時候我們希望在div和span中的內容在垂直方向上居中顯示，這在一些布局設計中非常有用。本文將詳細介紹如何使用CSS和一些代碼案例來實現div和span的上下居中。
下面是一些代碼案例，以幫助更好地理解如何實現div和span的上下居中。
代碼案例一：

html
<div class="container">
<span class="center-text">Hello World!</span>
</div>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid black;
}
.center-text {
text-align: center;
font-size: 24px;
}
</style>

上述代碼案例中，我們使用了flex布局。通過設置父元素container的display: flex屬性，我們讓子元素水平和垂直居中。justify-content: center屬性將內容在水平方向上居中，align-items: center屬性將內容在垂直方向上居中。最后，設置container的高度來定義容器的高度。center-text類則定義了內部文本的樣式，使其居中顯示。
代碼案例二：

html
<div class="container">
<span class="center-text">Hello World!</span>
</div>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.center-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 24px;
}
</style>

在上述代碼案例中，我們使用了相對定位和絕對定位來實現上下居中效果。設置container的position: relative屬性，創建了一個相對定位的參考容器。將center-text類設置為position: absolute，然后使用top: 50%和left: 50%屬性將其移動到相對定位容器的中間位置。最后，通過使用transform: translate(-50%, -50%)屬性來調整center-text類的位置，使其在垂直和水平方向上都居中。
代碼案例三：

html
<div class="container">
<span class="center-text">Hello World!</span>
</div>
<style>
.container {
display: table;
height: 200px;
width: 100%;
border: 1px solid black;
}
.center-text {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 24px;
}
</style>

在上述代碼案例中，我們使用了table布局來實現上下居中。設置container的display: table屬性，將其轉換為一個表格布局容器。然后，將center-text類設置為display: table-cell，使其表現為表格單元格。通過設置vertical-align: middle屬性將其在垂直方向上居中。由于table布局會自動填充整個父容器的寬度，我們設置container的width: 100%屬性來占滿整個寬度。
通過以上三個例子，我們可以看到不同的實現方法，在不同的布局需求中可以選擇適合的方法來實現div和span的上下居中效果。無論是使用flex布局、相對定位與絕對定位還是table布局，都可以達到我們所需的效果。根據實際需求選擇合適的方法，并根據具體情況進行樣式調整，使布局看起來更美觀和專業。