Как изображение может отображаться в центре экрана вместо относительной позиции?

Question

В следующем фрагменте кода, когда я нажимаю слово «слово», появляется изображение «image.png», окруженное каким-то текстом «текстовый текст», но позиция относительно слова «слово». Как сделать так, чтобы эта сборка (изображение, окруженное текстом) отображалась в центре экрана, а не относительно положения слова «слово»?

.thumbnail {
  position: relative;
  z-index: 0;
}

.thumbnail:hover {
  background-color: transparent;
  z-index: 50;
}

.thumbnail span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:active span {
  /*CSS for enlarged image on hover*/
  visibility: visible;
  top: 20px;
  left: 0px;
  /*position where enlarged image should offset horizontally */
}

<a class="thumbnail" href="#thumb" style="text-decoration:none">word
    <span>text text <img src="/image.png"></span></a>

Answer 1

Удалите position: relative; из .thumbnail, затем примените стандартную технику центрирования, показанную ниже:

.thumbnail {
  z-index: 0;
}

.thumbnail:hover {
  background-color: transparent;
  z-index: 50;
}

.thumbnail span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:active span {
  /*CSS for enlarged image on hover*/
  visibility: visible;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*position where enlarged image should offset horizontally */
}

<a class="thumbnail" href="#thumb" style="text-decoration:none">word
    <span>text text <img src="/image.png"></span></a>