js使用flex布局实现div中的两个div按照两个居中展示

在JavaScript中，通常我们不会直接使用JS来控制CSS样式，而是通过HTML和CSS结合实现布局效果。但是，如果你想要使用纯粹的JavaScript来操作DOM元素来达到类似的效果，可以这样做：

首先，你需要在HTML中创建两个`div`元素，并且给它们都添加`display: flex; justify-content: center; align-items: center;`的样式：

<div id="parentContainer" style="display: flex; justify-content: center; align-items: center;">
  <div class="childOne">Div 1</div>
  <div class="childTwo">Div 2</div>
</div>

然后，你可以用JavaScript来获取这两个子元素并设置它们的位置：

// 获取两个子元素
const childOne = document.querySelector('.childOne');
const childTwo = document.querySelector('.childTwo');

// 设置宽度和高度，这里假设都是自动大小
childOne.style.width = 'auto';
childOne.style.height = 'auto';

childTwo.style.width = 'auto';
childTwo.style.height = 'auto';

// 使它们居中
childOne.style.position = 'absolute';
childTwo.style.position = 'absolute';

childOne.style.left = '50%'; // 向左移动自身宽度的一半
childOne.style.top = '50%'; // 向上移动自身高度的一半

childTwo.style.left = '-50%'; // 向右移动自身宽度的一半
childTwo.style.top = '-50%'; // 向下移动自身高度的一半

// 或者使用transform属性
childOne.style.transform = 'translate(-50%, -50%)';
childTwo.style.transform = 'translate(50%, 50%)';

这样，两个`div`就会相对于父容器居中了。