> When using flexbox we work with two axes: the main and cross axes. As their names suggest, these axes form a hierarchical relationship, the main axis being superior to the cross axis.
https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183
Get yourself familiarize with `flexbox`.
> When using flexbox we work with two axes: the main and cross axes. As their names suggest, these axes form a hierarchical relationship, the main axis being superior to the cross axis.
https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183
Always use `flexbox` for alignment.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.btn {
background-color: #1db954;
padding: 11px 44px;
text-transform: uppercase;
letter-spacing: .16em;
font-size: 11px;
text-decoration: none;
}
.text-center-index {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<div class="text-center-index">
<a href="#" class="btn btn-outline-index">Home Product</a>
</div>
<!-- end snippet -->
