如何使HTML中item1与item2各占50%宽度并分别左右居中？

要实现item1和item2分别位于页面左右两侧且各自内部居中，核心是让两个子元素各自占据一半页面宽度，再在自身区域内做居中对齐。之前用justify-content: space-between、space-around或Grid无效，大概率是因为子元素没被分配足够空间，仅紧贴自身内容宽度，导致无法撑开到页面两侧。

方法一：Flex 布局实现 #

<div class="container">
  <div class="item item1">item1 内容</div>
  <div class="item item2">item2 内容</div>
</div>

/* 父容器占满页面宽度 */
.container {
  display: flex;
  width: 100vw; /* 若父元素已有宽度，也可设为100% */
}

/* 每个子元素平分父容器宽度，内部居中 */
.item {
  flex: 1; /* 自动平分父容器可用宽度 */
  display: flex;
  justify-content: center; /* 水平居中自身内容 */
  align-items: center; /* 可选：垂直居中内容 */
}

/* 可选：添加背景区分区域，方便查看效果 */
.item1 {
  background-color: #f5f5f5;
}
.item2 {
  background-color: #e8e8e8;
}

方法二：Grid 布局实现 #

<div class="container">
  <div class="item item1">item1 内容</div>
  <div class="item item2">item2 内容</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 将容器分成两个等宽列 */
  width: 100vw;
}

.item {
  display: flex;
  justify-content: center; /* 水平居中自身内容 */
  align-items: center; /* 可选：垂直居中内容 */
}

如果之前用Grid没生效，大概率是没设置grid-template-columns来明确分配列宽，或者没给子元素添加内部居中的样式。

内容的提问来源于stack exchange，提问作者Matija Knezevic