How to horizontally center a div with anchor links inside? - html

Question

I've looked into this and follow a couple instructions and they don't seem to work.
Follow this link for the code:
https://jsfiddle.net/3h937r1q/7/
I've tried margin: 0 auto;(center-block class) and float: none; on the parent div but I can't seem to get it to work. Can anyone help me center div in the middle of the page and tell me why it isn't working?
Expected outcome: https://jsfiddle.net/3h937r1q/22/
Except I do not want to use margin-left to move it in to the middle

Answer 1

You can use col-offset:
<div class="col-xs-12 col-md-12 home-buttons center-block" >
<a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate col-sm-offset-2 col-md-offset-4" >
<div class="tile-text">
AP REVIEW
</div>
</a>
<a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
<div class="tile-text">
VAT CHECKER
</div>
</a>
</div>

Answer 2

I have removed height and given padding: 40px 0px to anchor tag
Updated DEMO
.home-buttons .HomepageBtn {
background-color: #4F7F64;
/*height: 140px;*/
padding: 40px 0px;
color: white;
font-size: small;
font-family: "futura-pt-n7", 'futura-pt', Helvetica, Arial, sans-serif;
font-weight: bold;
border-style: solid;
text-align: center;
}

Answer 3

I think you are looking for this. As you are using bootstrap grid in within a tag, you must use bootstrap offset class to center the element.
<div class="col-xs-12 col-md-12 home-buttons">
<a href="#" class="col-xs-6 col-sm-4 col-md-2 col-md-offset-4 col-sm-offset-2 HomepageBtn Animate">
<div class="tile-text">
AP REVIEW
</div>
</a>
<a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
<div class="tile-text">
VAT CHECKER
</div>
</a>
</div>

Answer 4

https://jsfiddle.net/25Lno6n7/
.home-buttons {
width:600px;
display:flex;
flex-direction:column;
align-items:center;
}
.home-buttons .HomepageBtn {
flex:0 0 300px;
}