Как разместить блок по центру css

Вариантов отцентрировать блок с помощью CSS существует несколько. Рассмотрим их:

Вариант №1. Для корректной работы этого варианта необходимо задать ширину центрируемого блока.

<div class="center-block">Данные должны быть по центру</div>

.center-block {
  /* устанавливаем внешние отступы сверху и снизу в 0, 
     а левый и правый - автоматический.
  */
  margin: 0 auto;
  /* Для наглядности зададим блоку фон и изменим цвет текста*/
  background-color: #38d9a9;
  color: #fff;
  /* задаем ширину блока*/
  width: 200px;
}

Вариант №2. Здесь мы используем flexbox. Для корректной работы для цитируемого элемента необходимо создать контейнер-обертку.

<div class="container">
  <div class="center-block">Данные должны быть по центру</div>
<div class="container">

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

.center-block {
  /* Для наглядности зададим блоку фон и изменим цвет текста*/
  background-color: #38d9a9;
  color: #fff;
  width: 200px;
}

Вариант №3. Тут мы применим абсолютное позиционирование и свойство translate. При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров

<div class="container">
  <div class="center-block">все буквы в этом параграфе станут заглавные</div>
</div>

.container {
  background-color: #bac8ff;
  height: 100vh;
}

.center-block {
  background-color: #38d9a9;
  color: #fff;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}