在固定的div中对齐和居中图像

我有一个非常简单的页脚固定页面。在此页脚上，我想放置5张图像，它们之间的距离相等。

这是我的HTML / CSS：
页脚div：

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 9%;
    background-color: pink;
}

和HTML：

<div class="fixed">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
</div>

这是我得到的：

我想在中间显示红色图标。使用“％”值时，应根据显示分辨率作出响应。我考虑过在页脚中进行网格处理。但是，有没有更简单的方法呢？在网路上找不到任何相关资讯，希望它不会重复！预先感谢您的任何帮助 ！