Question

So basically I need to center (vertically) text, but the height is variable, since it can be on multiple lines, how can I do this?

What I’ve tried:

.box {
  text-align: center;
  vertical-align: center;
}

.box {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 50%;
}

.box {
  margin: 50% auto;
  text-align: center;
}

I don’t know if this is even possible or if I have to correct it with JS.

Answer 1

Use display:table-cell

.box {
  text-align: center;
  vertical-align: middle;
    background:black;
    color:white;
    height:200px;
    display:table-cell;
    width:450px
}

DEMO – Single line

DEMO – Multi line