Align items vertically in a div [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How do I vertically align text in a div?
(34 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a div with an anchor inside and I want this anchor to take the whole width of the div however, I would like to have the text of the anchor to be centered within the div, it's not working for me. I have tried this code:
.actions {
display: -webkit-flex;
display: flex;
}
.action {
background: #ef5b2b;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 5px;
text-align: center;
height: 100px;
position: relative;
}
.action a {
display: inline-block;
height: 100%;
width: 100%;
vertical-align: middle;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>
any help is appreciated.

Answer 1

Try this:
The .actions container needs to be flex so that the two actions containers will be evenly spaced, side by side.
Each .action container will hold the two anchor containers (which will be 100% height and width). Therefore, the .action containers only need to be width/height 100% themselves.
The a tags within the action containers need to be 100% height/width so that they fill the entire .action container. BUT, to center the text vertically and horizontally, you can use flex so that you can use justify-content: center and align-items:center - which makes the content within them centered both horizontally (justify-content) and vertically (align-items).
.actions {
width: 100%;
display: flex;
}
.action {
flex: 1;
position: relative;
width: 100%;
height: 100px;
margin: 5px;
background: #ef5b2b;
}
.action a{
height:100%;
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>