Need help vertically aligning text in HTML5 and CSS3

Question

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  background-color: #545454;
  vertical-align: middle;
  text-align: center;
}

<div class="Cube">
  <a href="#">Random Stuff</a>
</div>

So I've been practicing website making with html5 and CSS and I want to make a square with text in the middle. I get the horizontal alignment but the vertical alignment just doesn't want to work.

Answer 1

In this case / if it's a single line, I think the simplest solution is adding the same line-height as the height of the element.

line-height: 16vw;

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  line-height: 16vw;
  background-color: #545454;
  text-align: center;
}

<div class="Cube">
  <a href="#">Random Stuff</a>
</div>

Answer 2

Just add to your CSS

line-height : 16vw;

Answer 3

Add this to your css will work as well:

align-items: center; 
display: flex;

Answer 4

You can try display:inline; with your CSS Code

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  background-color: #545454;
  display:inline;
  text-align: center;
  vertical-align: middle;
}

Otherwise, you can use padding to align your division from the top,

padding-top: 50px;