'Centering an <hr> tag

I'm having some trouble with my hr tag in HTML, as it isn't automatically centering as I expect it to. This is what my current code looks like: 

<div id = "updatestatus" class = "statuscontainer">
    <div class = "verticalalign">Update Status</div>
</div>
<hr width = "95%">

<div id = "insertstatus" class = "statuscontainer">
    <form></form>
</div>

As you can see, I'm placing my hr tag in between two divs, and I believe it's supposed to automatically center, but it ends up going to the left instead. I have also tried hr align = center with no success either.

Edit: I just realized that when I place the entire hr tag within <center></center> it centers, but I'm still trying to figure out why it doesn't center on its own.

htmlcentering


Solution 1:[1]

Try margin: auto;

<hr style="width:100px; margin: auto;" />

Solution 2:[2]

I use !important on my CSS

<hr style="width:50%; margin-left:25% !important; margin-right:25% !important;" />

Solution 3:[3]

Simply add following css for hr tag

width:25%;
margin: auto;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gaurav
Solution 2 Manik8797
Solution 3 Lee Taylor

Related Questions