HTML5为什么hr无法居中？

今天在写导航栏的时候遇到了一个问题，让我百思不得其解，特此记录

项目简介

项目要求做导航栏并实现相应的跳转功能，代码及效果如下

html部分：这里我先写了一个标题，导航栏上下各有一个分割线

    <h2>2024春季最新热款</h2> 
    <hr  size="3" color="#c3" width="750px"> 
    <nav>
        <a href="#c1">电子数码</a>
        <a href="#c2">瓜果蔬菜</a>
        <a href="#c3">初春连衣裙</a>
        <a href="#c4">男士西装</a>
        <a href="#c5">糖果巧克力</a>
    </nav>  
    <hr  size="3" color="#c3" width="750px">

css部分：这里先弄了通配符选择器，其实写的时候并不是很清楚这个的用处。body设置了全局居中，当时想要实现的效果是5个超链接在中间，只有有超链接的部分有分割线，没有超链接的部分就没有分割线（这句话好像有点绕，大家看我前后效果对比图就能明白什么意思啦哈哈）

*{
    margin: 0;
    padding: 0;
}
body{
    text-align: center;
}
a{
    font-size: 20px;
    text-indent: 1em;
    display: inline-block;
}

 效果如下

大家看到了吗？我想让这个分割线在中间！但是它......不在，我一开始很纳闷，我明明设置了全局居中，那这个hr标签为什么不居中呢？我想了很多种可能，甚至觉得是我电脑的问题（太joker啦！）后来，我终于发现了问题所在......

解决方法

之前一直在想hr标签的问题，却忽略了css中对通配符选择器的设置，我们先来喵一眼参考手册，*的作用是选择所有元素，margin和padding分别是定义外边距和内边距的，*{margin: 0; padding: 0}作用是重置浏览器默认样式。当我把关于*{}中的内容注释掉之后，发现就可以达到我想要的效果。那么究竟什么时候会用到*{margin: 0; padding: 0}呢？

关于*{margin 0；padding 0}

margin和padding这两个属性涉及到了盒子模型，如下图，上述代码是用来把所有元素的外边距和内边距置为 0，目前来看不推荐使用。