Как перенести и центрировать текст в блоках

Зачем вы ставите пробелы в css свойствах?

.do__block {
  text - align: center; /** Не сработает */
  text-align: center; /** Сработает */
}

И так у вас со многими свойствами, где есть -.

.do__list {
  display: flex;
  justify-content: center;
  color: #103988;
}

.do__item:not(:last-child) {
  margin-right: 46px;
}

.do__item {
  background: # CCCCCC;
  box-shadow: 0 px 4 px 4 px rgba(0, 0, 0, 0.25);
  border-radius: 10 px;
  padding: 25 px;
  padding-bottom: 38 px;
  width: 330 px;
  height: 100 %;
}

.do__block {
  text-align: center; /** Не сработает */
}

.do__item - description {
  width: 50 %;
  text-align: center;
}

<ul class="do__list">
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/delivery.png">
      <h2 class="do__item-description">Дорожная транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/cargo-ship.png">
      <h2 class="do__item-description">Морская транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/railroad.png">
      <h2 class="do__item-description">ЖД транспортировка</h2>
    </div>
  </li>
  <li class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/airplane.png">
      <h2 class="do__item-description">Воздушная транспортировка</h2>
    </div>
  </li>
</ul>

Первым делом я рекомендую заменить все ul и li в HTML на div: стили CSS в данном случае самодостаточны, теги списков будут только мешать.

Для расположения элементов в do__item можно использовать flex (как вы сделали в do__list):

.do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Чтобы не мешать flex, нужно также убрать width: 50% в do__item-description. Результат:

Осталось решить проблему с отсутствием переноса в третьем блоке. Слово "ЖД" короткое, поэтому перенос сам не появится. Я предлагаю удлинить его за счёт невидимого текста:

HTML

<h2 class="do__item-description">
  <text class="invisible-text">---</text>
    ЖД
  <text class="invisible-text">---</text>
  транспортировка
</h2>

CSS

.invisible-text {
  color: rgba(0, 0, 0, 0)
}

Результат:

Итоговый код:

HTML

<div class="do__list">
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/delivery.png" />
      <h2 class="do__item-description">Дорожная транспортировка</h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/cargo-ship.png" />
      <h2 class="do__item-description">Морская транспортировка</h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/railroad.png" />
      <h2 class="do__item-description">
        <text class="invisible-text">---</text>
          ЖД
        <text class="invisible-text">---</text>
        транспортировка
      </h2>
    </div>
  </div>
  <div class="do__item">
    <div class="do__block">
      <img class="do__img" src="img/airplane.png" />
      <h2 class="do__item-description">Воздушная транспортировка</h2>
    </div>
  </div>
</div>

CSS

.do__list {
  display: flex;
  justify-content: center;
  color: #103988;
}

.do__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #CCCCCC;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 25px;
  padding-bottom: 38px;
  width: 330px;
  height: 100%;
}

.do__item:not(:last-child) {
  margin-right: 46px;
}

.do__block {
  text-align: center;
}

.invisible-text {
  color: rgba(0, 0, 0, 0)
}