纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

要实现未知宽高的元素在指定元素中垂直水平居中显示，我们可以使用CSS的Flex布局，或者是使用JavaScript来计算元素的宽高并动态设置CSS样式。

以下是一种使用JavaScript实现的方法：

1. 获取当前元素和指定的父元素

const parentElement = document.getElementById('parent');

const element = document.getElementById('element');

1. 获取元素的宽高

const width = element.offsetWidth;
const height = element.offsetHeight;

1. 设置元素的位置

element.style.position = 'absolute';
element.style.top = `${parentElement.offsetHeight / 2 - height / 2}px`;
element.style.left = `${parentElement.offsetWidth / 2 - width / 2}px`;

完整代码如下：

const parentElement = document.getElementById('parent');
const element = document.getElementById('element');

const width = element.offsetWidth;
const height = element.offsetHeight;

element.style.position = 'absolute';
element.style.top = `${parentElement.offsetHeight / 2 - height / 2}px`;
element.style.left = `${parentElement.offsetWidth / 2 - width / 2}px`;

通过这种方式，我们可以把任何未知宽高的元素垂直水平居中显示在指定的父元素中。

以下是两个示例说明：

示例1： 将一个未知宽高的图片垂直水平居中显示在一个div中

HTML代码：

<div id="parent">
  <img id="image" src="example.jpg" alt="example">
</div>

JavaScript代码：

const parentElement = document.getElementById('parent');
const element = document.getElementById('image');

const width = element.offsetWidth;
const height = element.offsetHeight;

element.style.position = 'absolute';
element.style.top = `${parentElement.offsetHeight / 2 - height / 2}px`;
element.style.left = `${parentElement.offsetWidth / 2 - width / 2}px`;

示例2：将一个未知宽高的Youtube视频嵌入一个div中，并垂直水平居中显示

HTML代码：

<div id="parent">
  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

JavaScript代码：

const parentElement = document.getElementById('parent');
const element = document.getElementById('video');

const width = element.offsetWidth;
const height = element.offsetHeight;

element.style.position = 'absolute';
element.style.top = `${parentElement.offsetHeight / 2 - height / 2}px`;
element.style.left = `${parentElement.offsetWidth / 2 - width / 2}px`;

通过上述两个示例，我们可以看到如何使用纯JS代码来实现任何未知宽高的元素在指定元素中垂直水平居中显示。