Gorg Gorg - 1 year ago 69
CSS Question

vertically align text within itself

I have an

with a height of
. Therefore the height is unknown. How can I center the text within itself? For the sake of the example, I have given the parent fixed dimensions but this is not the case. I have tried using vertical align but that doesn't work, I believe I may need to change the
to do that?

I don't want to center the text within its parent, I want to know if it is possible to center it within itself. The text needs to be 100% in both dimensions so that the fills the parent div.

.unknowndimensions h3{

<div class="unknowndimensions">
<a href="#"><h3>Title</h3></a>

Answer Source

You can make your .unknowndimensions element a flex-container. You then use justify-content: center and align-items: center to center both horizontally and vertically, respectively.

body {
  margin: 0;
.unknowndimensions {
  height: 100vh;
  background-color: dodgerblue;
  display: flex;
  justify-content: center;
  align-items: center;
.unknowndimensions h3 {
  margin: 0;
  background: #f7f700;
<div class="unknowndimensions">
  <a href="#"><h3>Title</h3></a>

More Info:

You can find more info and resources in this post.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download