<div>標簽是HTML中常用的一個容器元素，用于將其他元素組織在一起。在使用<div>標簽時，有時我們希望其中的元素能夠在水平方向上居中顯示。為了實現這個效果，可以使用浮動（float）屬性來控制<div>中的元素位置。

以下是幾個代碼案例，使用不同的方法來實現<div>中元素的水平居中顯示。

第一種方法是使用浮動屬性來實現<div>中的元素居中。設置<div>為塊級元素，然后將其中的元素設置為浮動，并且設置margin為auto。代碼如下：

<div style="width: 500px; height: 200px; border: 1px solid black;">
<div style="float: left; margin: 0 auto; width: 200px; height: 100px; background-color: gray;"></div>
</div>

第二種方法是通過使用flexbox布局來實現<div>中元素的居中。設置<div>為flex容器，然后使用justify-content屬性將其中的元素水平居中。代碼如下：

<div style="display: flex; justify-content: center; width: 500px; height: 200px; border: 1px solid black;">
<div style="width: 200px; height: 100px; background-color: gray;"></div>
</div>

第三種方法是通過使用position屬性來實現<div>中的元素居中。設置<div>為相對定位，然后將其中的元素設置為絕對定位，并且通過left和right屬性將其水平居中。代碼如下：

<div style="position: relative; width: 500px; height: 200px; border: 1px solid black;">
<div style="position: absolute; left: 0; right: 0; margin: 0 auto; width: 200px; height: 100px; background-color: gray;"></div>
</div>

以上是三種常用的方法來實現<div>中元素的水平居中顯示。根據實際情況選擇適合的方法，可以使頁面布局更加美觀和合理。