center text vertically and horizontally over div/img

Question

I'm trying to get "concierge" to always be centered over the image on this page. I think I'm close but it's not just right. Any ideas?

header.concierge_header {
  position: absolute !important;
  top: 30% !important;
  color: white !important;
  left: 50%;
}

and then concierge_header_div is the parent

other option would be to switch over to something like this but i haven't gotten it to work

display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;

Answer 1

for setting sth verticaly and horizontaly center of a dom, you have to set position of wrapper to relative, and set position of target dom to absolute and set top,right,left,bottom positions to 0 and margin to auto

.concierge_header h1
{
  position: absolute !important;
  color: white !important;
  top:0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: 50px;
  text-align: center;
}
.concierge_header_div {
  position: Relative;
  width: auto;
  height: auto;
}