How is a definitive way to center text inside a variable size block?

Question

I've tried almost everything, but maybe my case is too specific. I have a few blocks (rows) without space between then and I need to absolute center it and as you can see it's not centered when is 2 lines.

1) I can have one line or more, so I can't use line-height solution in this case.

2) The flex solution didn't worked for iPhone.

3) The block width and height are variable

4) The text like "personal & buchhaltung" cannot overlap the mouse hover of the block (becomes colorful when mouse hover)

.portfolio-tile span {
  width:100%;
  position: absolute;
  z-index:999;
  top:0;
  left:0;
  right:0;
  margin:0;

  text-align: center;}

Answer 1

.portfolio-tile {
   position: relative;
}
.portfolio-tile span {
   max-width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

There are other, better ways of centering. The major problem this one has is when the span has too much content for the parent to fit, as it will overflow. Possible fixes exist but, for your case, this will do.

Here's the fully prefixed code (you mentioned iPhone):

.portfolio-tile {
   position: relative;
}
.portfolio-tile span {
   max-width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
}

Use autoprefixer to prefix your CSS before deploying to production. For max browser compat, use > 0% as setting (small input at the bottom).

Answer 2

I can't see why the flex solution wouldn't work. Have you tried creating a div within and using the flex solution there?

#absolute {
  position: absolute:
  top: 0;
  left: 0;
  width: 100%;
}

#flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  background: blue;
}

#flexbox-content {
  text-align: center;
  color: white;
}

<div id="absolute">
  <div id="flexbox">
    <div id="flexbox-content">
      <h1>It works!</h1>
      <p>Multi line!</p>
    </div>
  </div>
</div>