Problema con allineamento classe

[Pandolfo]

Il problema è che allineando una classe in questo modo su risoluzioni differenti ciò che deve comparire al click del mouse appare sempre in posti diversi.

.hint {
  display:none;
  position: absolute;
  right: 200px;
  middle: 100px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #E80303;
  padding: 10px 12px;
  background-color: #F0F0F0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: justify;
}

come faccio a farlo partire dal centro? Partendo dal centro gli dico io quanto a destra e quanto a sinistra, ed indipendentemente dalla risoluzione si trova sempre allo stesso posto. ho provato così ma niente

.hint {
  display:none;
  position: absolute;
  cener: 0px
  middle: 100px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #E80303;
  padding: 10px 12px;
  background-color: #F0F0F0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: justify;
}

[Pandolfo2]

up

[Ciccio17]

Invece di utilizzare unità assolute (px), utilizza unità relative (em).
Prova così e vedi se le cose migliorano.