在本文中，我们将介绍如何将ul水平居中对齐于div中。水平居中对齐是网页设计中常见的需求，特别是当我们希望将导航菜单水平居中显示时。下面将详细介绍实现这一效果的方法及示例。

阅读更多：HTML 教程

Flexbox是一种用于构建自适应网页布局的强大工具，它可以轻松实现水平居中对齐效果。首先，我们需要在包含ul的div上应用flex布局。

上述代码中，我们给包含ul的div添加了class为”container”，通过在container的样式中设置display为flex，使其成为一个flex container。并且通过设置justify-content为center，让flex items（在这里是ul元素）在水平方向上居中对齐。

另一种实现ul水平居中对齐的方法是使用text-align属性。我们可以将text-align属性应用于包含ul的div上。

通过将div的样式中text-align设置为center，可以使ul水平居中对齐。

我们还可以使用margin属性来实现将ul水平居中对齐于div。这种方法适用于当ul的宽度固定时。

在上述例子中，我们通过将ul的margin设置为”0 auto”，并且设置ul的固定宽度为300px，使其水平居中对齐。

最后一种方法是使用position和transform属性来实现ul的水平居中对齐。

上述代码中，我们通过将ul的position设置为absolute，并将left设置为50%，再通过transform属性中的translateX(-50%)将ul向左偏移50%，实现ul的水平居中。

本文介绍了四种将ul水平居中对齐于div的方法，包括使用flexbox布局、text-align属性、margin属性以及position和transform属性。根据实际需求选择合适的方法，可以轻松实现ul的水平居中效果。希望本文对您有所帮助！