Html 如何将无序列表集中在页脚中？

我在玩JSFIDLE，我试图将无序列表（在我的例子中，是四个）放在页脚的中心（我现在经常看到网页上有这样的列表）

我应该如何处理边距和填充，以使那些无序列表居中（最右侧和最左侧的右/左侧边距相等），并且在列表之间填充相等

html代码：

<div class="mainContent">
    <header class="header">
        <h1>Header</h1>
    </header>
    <div class="content">
        <p>Content...</p>
    </div>
    <footer class="footer">
        <p> &copy Footer</p>
        <hr>
        <div class="footerLists">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </footer>
</div>

---

我不完全确定您想要实现的是否是网格布局？听起来是这样的，在这种情况下。。。。您需要一个网格：）

与其变得太复杂，还不如抓住一个网格框架——其中有数百个——了解网格是如何工作的是很有用的，因为你可以直接将这些知识应用到你的网站页脚上

我见过的最好的文章之一是“不要想得太多”

如果你把你的四个列表简单地看成是25%个纵队，那么你的一半战斗就赢了。

---

不管您的容器元素是像素还是百分比，基于百分比的网格将整齐地放置在其中

我已经编辑了你的JSFIDLE。请检查以下代码：

.mainContent {
 width: 80%;
 margin: 0 auto;
 text-align:center;
}

.header {
 border: 2px solid red;
}

.content {
    border: 2px solid red;
}

.footer {
 height: 200px;
 border: 2px solid red;
}

.footer ul {
 float: left;
 list-style: none;
 width: 80%;
}

.footer hr {
 width: 80%;
}

.footerLists ul {
 width:13%;
}

---

这可能是页脚列表上的“margin:0 auto”功能，但您可能需要使用包装器才能使其正常工作。或者设置“display:table”之类的内容。我想试试，但我要睡觉了谢谢你的链接。我想这就是我想要的，4%是25%（父母）

.mainContent {
 width: 80%;
 margin: 0 auto;
 text-align:center;
}

.header {
 border: 2px solid red;
}

.content {
    border: 2px solid red;
}

.footer {
 height: 200px;
 border: 2px solid red;
}

.footer ul {
 float: left;
 list-style: none;
 width: 80%;
}

.footer hr {
 width: 80%;
}

.footerLists ul {
 width:13%;
}