Я не могу центрировать <h2> по вертикали в теге <div>

div должен иметь:

div {
  display:flex;
  align-items: center;
}

Есть несколько проблем:

1. Элемент h2 не находится во гибком контейнере (вы должны установить display: flex на родителя div)
2. Свойства justify-content и align-content должны быть установлены для контейнера flex, а не для элемента flex.
3. Для вертикального центрирования гибкого элемента во гибком контейнере с помощью flex-direction: row вы должны использовать align-items, а не align-content

div {
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    text-align: center;
    background-color: green;    
}

h2 {
    font-size: 20px;
    font-weight: 100;
}

<div>
  <h2>Headline 2</h2>
</div>

Наилучший подход к тому, чтобы сделать блок Children Div вертикально центрированным, состоит в том, чтобы отображать Flex div Mother, а не блок Children.

div {
    display: inline-flex;
    background-color: green;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    
}
h2 {
    font-size: 20px;
    font-weight: 100;
    margin: 0;
}

<div>
    <h2>hello</h2>
</div>

Я согласен на 100% с ответами, отображающими гибкость контейнера, а не ребенка.

Даже если я всегда использую flex и css grid, я хотел бы добавить еще одно решение «по старинке», основанное на высоте строки:

        div {
            display: inline-block;
            background-color: green;
            width: 130px;
            margin-top: 20px;
            line-height: 45px;
            vertical-align: middle;
            text-align: center;
        }
        h2 {
            font-size: 20px;
            font-weight: 100;
            line-height: 45px;
        }