要使用这种方法，您需要使用child combinator>，它表示"匹配.container类的直接子元素，并且没有.h2类"

.container > :not(.h2) {
      display: flex;
      justify-content: center;
      align-items: center;
}

<div class="container">
  <h1>welcome</h1>
  <div class="h2">
    <h2>Hi</h2>
  </div>
</div>

您最初的CSS .container:not(.h2)是说"选择一个既有.container类又没有.h2类的元素"-.container符合这一点，所以它将样式应用于整个div。
实际上，在这个例子中，你可以只在h1上使用text-align: center;，创建不同的flexbox容器，或者使用更具体的元素选择器，而不是使用父类.container。

您正在告诉. container类将其子类居中，这就是两个元素都居中的原因。

• • Center text：**在您的情况下，您只需要将文本居中，因此我们可以为其分配text-align：center属性并删除. container样式。
• • 使用Flexbox居中：这是您在尝试中使用的，但是您必须重新构造**您的html。

使用Flexbox的代码：

.centerElement{
  display: flex;
  justify-content: center;
}

<div>
  <div class="centerElement">
    <h1>welcome</h1>
  </div>
  <div class="h2">
    <h2>Hi</h2>
  </div>
</div>

使用文本对齐的代码：
一个二个一个一个