div li 居中對齊是一種常見的網頁布局方式，它可以使網頁內容顯示在頁面的正中間位置，給用戶帶來更好的視覺體驗。在這篇文章中，我們將通過幾個代碼案例來詳細解釋和說明如何實現div li 居中對齊的效果。
案例一：使用flexbox <div> <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> </div>
p標簽：在這個案例中，我們使用了flexbox布局來實現div li的居中對齊。，給外層的div元素設置display: flex和justify-content: center樣式，這樣就實現了水平居中對齊。然后，給內部的ul元素設置list-style: none來去除默認的列表樣式。最后，給li元素設置padding和margin樣式來美化列表項的顯示效果。
pre標簽： <style> div { display: flex; justify-content: center; }
ul { list-style: none; }
li { padding: 10px; margin: 5px; } </style>
案例二：使用text-align屬性 <div style="text-align: center;"> <ul style="display: inline-block;"> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> </div>
p標簽：在這個案例中，我們使用text-align屬性來實現div li的居中對齊。，給外層的div元素設置text-align: center樣式，這樣就實現了列表的水平居中對齊。然后，給內部的ul元素設置display: inline-block樣式，使其變為塊級元素并且在水平方向上居中對齊。最后，給li元素設置padding和margin樣式來美化列表項的顯示效果。
pre標簽： <div style="text-align: center;"> <ul style="display: inline-block;"> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> </div>
以上是兩個典型的案例，它們展示了如何使用不同的方法實現div li的居中對齊。除了這些案例外，還有其他一些方法可以實現類似效果，比如使用position和transform屬性等。需要根據實際情況選擇最合適的方法來實現居中對齊的效果。
：div li的居中對齊是網頁布局中常見的一種方式，通過使用flexbox、text-align等屬性，可以實現div li在頁面中的水平居中對齊。在實際開發中，根據具體情況選擇最合適的方法來實現居中對齊效果，可以提高用戶的視覺體驗。