Following illustrates in an atomic fashion the use of margin:auto:
[ source ]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:500px;
margin: auto;
border: 5px solid lightskyblue;
}
</style>
</head>
<body>
<h2>Illustrating the employment of <i>margin:auto</i></h2>
<p>
The <i>margin : </i> property set to <i>auto</i> as
<i>margin: auto</i> for an element centers an element horizontally.
The html element takes up a specified width (of 500px)
while the remaining space is split equally between left & right margins:
</p>
<div>
Element div is horizontally centered due to its <i>margin: auto;</i> property & value.
</div>
</body>
</html>