Почему CSS align-items не центрирует мой текст

.top-part {
    position: relative;
    display: flex;
    background:  rgba(51, 102, 255,0.7);
    width: 100%;
    height: 8cm;
    background-position: center;
    background-size: cover;
}

.not-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family:'Consolas','Courier New','Trebuchet MS';
    color: white;
    line-height: .5cm;
    flex-wrap: wrap;
}

<section class="top-part">

        <div class="not-content">

              <h1><strong>BIG TEXT</strong></h1>
                
              <h4>TEXT</h4>

        </div>
        
</section>

я не знаю, какую ошибку я допустил, "align-items: center;" не работает как должно быть, он не центрирует мой текст горизонтально

Flexbox - это излишество в вашем случае. Просто text-align: center; будет работать нормально.

.not-content {
  text-align: center;
}
<div class="not-content">
  <h3>This is an H3 heading</h3>
  <h4>An H4 heading</h4>
</div>

Однако, первоначальная проблема, с которой вы столкнулись, связана с тем, что flexbox имеет размер, равный размеру содержимого. Это происходит потому, что ваш класс top-part имеет значение display: flex вместо display: block. Ниже я выделил элемент в Chrome devtools, чтобы проиллюстрировать, насколько велика область содержимого flexbox; обратите внимание, что в нее помещается только текст.

display flex only fits content

Если вы удалите display: flex из класса top-part, он будет делать то, что вы ожидаете.

дайте контейнеру <div class="not-content"> a width: 100%;, он будет работать :

.not-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Consolas", "Courier New", "Trebuchet MS";
  color: white;
  line-height: 0.5cm;
  flex-wrap: wrap;
  width: 100%;
}
Вернуться на верх