Как получить координаты x / y высоты центра, полученные JS?

Question

Что я хочу сделать

Я хочу получить центр высоты определенного элемента .main и получить элемент DOM, который там есть.

---

Текущий код

// Get the center of the height of .main
var mainH = document.getElementsByClassName("main").offsetHeight;
var mainHCenter = mainH / 2;

// Get the element at the center of the height of .main
var centerElm = document.elementFromPoint(x coord, y coord);

Я хочу использовать document.elementFromPoint (), который может получить элемент в указанном месте, но,
Видимо, необходимо указать координату х / у, и у меня возникают проблемы с ее получением.

Как я могу получить "координату x / y в центре высоты .main" в JS?

Пожалуйста, дайте мне знать, если мой код уже неверен.

Answer 1

Это то, что вы ищете? Я думаю, что вы были близко, но вам нужны координаты X и Y.

const main = document.querySelector('.main');
const centerY = main.offsetHeight / 2;
const centerX = main.offsetWidth / 2;

const element = document.elementFromPoint(centerX, centerY);
element.classList.add('highlight');

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 80%;
  height: 90%;
  background-color: papayawhip;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

article {
  width: 90%;
  height: 15%;
  background-color: palevioletred;
  margin: 2% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: papayawhip;
  font-weight: bold;
}

.highlight {
  background-color: white;
  color: black
}

<main>
  <section class="main">
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
  </section>
</main>