Как центрировать один элемент во flexbox, который состоит из нескольких элементов?

Question

В настоящее время мой код .css:

.form-wrapper {
  display: flex;
  justify-content: space-between
}

.testingForm {
  max-width: 320px;

}

.centerThis {
  align-self: center;
}

И мой код .js:

<div className="form-wrapper">
  <div className="testingForm">
    <FormGroup
      controlId="stuff"
      bsSize="large"
    >
      <ControlLabel>Stuff</ControlLabel>
      <FormControl
      />
    </FormGroup>
  </div>
  <div className="centerThis">
    <h1>Stuff here</h1>
  </div>
</div>

Как я могу отцентрировать имя "centerThis" и оставить имя класса "testingForm" там, где оно находится в данный момент? Я не могу отделить «testingForm» и «centerThis». Я безуспешно пытался решить эту проблему с помощью align-content и других методов.

Если это помогает, вывод html из инспектора после запуска сервера разработки показывает:

<div class="form-wrapper"><div class="testingForm"><div class="form-group form-group-lg"><label for="accountID" class="control-label">Stuff</label><input id="ID" class="form-control" value=""></div></div><h1>AWS</h1></div>

Answer 1

Установите div первого уровня flex как width: 100%;

.form-wrapper > div {
    width: 100%;
}

Тогда .centerThis вы можете text-align:center, если это просто текст и / или изображение, или вы можете установить его как display:flex и justify-content:center.

.centerThis {
    text-align: center;
}

Или

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

.form-wrapper {
  display: flex;
}
.form-wrapper > div{
  width: 100%;
}

.testingForm {
  max-width: 320px;

}

.centerThis {
  text-align: center;
}

<div class="form-wrapper">
  <div class="testingForm">
    <FormGroup
      controlId="stuff"
      bsSize="large"
    >
      <ControlLabel>Stuff</ControlLabel>
      <FormControl
      />
    </FormGroup>
  </div>
  <div class="centerThis">
    <h1>Stuff here</h1>
  </div>
</div>

РЕДАКТИРОВАНИЕ:

На основании вашего вывода HTML ...

Установить гибкие элементы первого уровня как width: 100%;

.form-wrapper > div,
.form-wrapper > h1 {
    width: 100%;
}

Затем h1 установить его как display:flex и justify-content:center и align-items: center.

.form-wrapper h1 {
    display: flex;
    justify-content: center;
    align-items: center;

}

body, html {
  height: 100%;
  margin: 0; /* Reset browser default */
}
.form-wrapper {
  display: flex;
  height: 100%;
}
.form-wrapper > div,
.form-wrapper > h1{
  width: 100%;
}

.testingForm {
  max-width: 320px;

}

.form-wrapper h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

<div class="form-wrapper">
  <div class="testingForm">
    <div class="form-group form-group-lg">
      <label for="accountID" class="control-label">Stuff</label>
      <input id="ID" class="form-control" value="">
    </div>
  </div>
  <h1>AWS</h1>
</div>