Центрирование элементов различными способами

.container {
  background-color: #f0f0f0;
  height: 200px;
  border: 1px solid #ccc;
}

.box {
  background-color: #4a90e2;
  width: 100px;
  height: 100px;
  margin-left: input1;
  margin-right: input2;
}

.container {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  input1: input2;
}

.container {
  background-color: #e0f7fa;
  padding: 15px;
  border: 1px solid #b2ebf2;
  input1: input2;
}

.item {
  display: inline-block;
  background-color: #00796b;
  color: white;
  width: 60px;
  height: 60px;
  margin: 5px;
  line-height: 60px; /* для верт. центрирования текста внутри */
  text-align: center; /* для гор. центрирования текста внутри */
}

.text-box {
  background-color: #fff8e1;
  border: 1px solid #ffecb3;
  height: 80px;
  input1: 80px; /* Значение должно быть равно высоте */
  text-align: center; /* Добавим и горизонтальное центрирование для наглядности */
}

.container {
  background-color: #f3e5f5;
  height: 250px;
  border: 1px solid #e1bee7;
  input1: input2;
  input3: input4;
  input5: input6;
}

.item {
  background-color: #8e24aa;
  width: 80px;
  height: 80px;
}

.container {
  background-color: #e8f5e9;
  height: 250px;
  border: 1px solid #c8e6c9;
  input1: input2;
  input3: input4;
}

.item {
  background-color: #388e3c;
  width: 90px;
  height: 90px;
}

.container {
  background-color: #e3f2fd;
  height: 250px;
  border: 1px solid #bbdefb;
  input1: input2;
  input3: input4;
  input5: input6;
}

.item {
  background-color: #1976d2;
  width: 70px;
  height: 70px;
}

.container {
  background-color: #fce4ec;
  height: 280px;
  border: 1px solid #f8bbd0;
  position: relative; /* Обязательно для позиционирования дочернего элемента */
}

.item {
  background-color: #c2185b;
  width: 100px;
  height: 100px;
  input1: input2;
  top: 50%;
  left: 50%;
  input3: input4;
}

.image-container {
  background-color: #fafafa;
  padding: 20px;
  border: 1px solid #eee;
  height: 150px;
  input1: input2;
}

.image-container img {
  /* Дополнительные стили для изображения, если нужны */
  /* max-width: 100%; */
  /* height: auto; */
}

.image-container {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #e0e0e0;
}

.image-container img {
  input1: input2;
  input3: auto;
  input4: auto;
  /* Зададим ширину явно, чтобы margin: auto сработал */
  width: 120px;
}

.container {
  background-color: #fff3e0;
  height: 150px;
  border: 1px solid #ffe0b2;
  input1: flex;
  input2: input3;
  /* align-items по умолчанию stretch или flex-start, нам не нужно его менять для этой задачи */
}

.item {
  background-color: #ef6c00;
  width: 100px;
  height: 50px;
}

.container {
  background-color: #ede7f6;
  height: 200px;
  border: 1px solid #d1c4e9;
  input1: flex;
  input2: input3;
  /* justify-content по умолчанию flex-start, нам не нужно его менять */
}

.item {
  background-color: #5e35b1;
  width: 100px;
  height: 50px;
}

.container {
  background-color: #f1f8e9;
  height: 220px;
  border: 1px solid #dcedc8;
  input1: input2;
  /* Свойства justify-items/align-items не нужны, если используем margin: auto на дочернем элементе */
}

.item {
  background-color: #689f38;
  width: 80px;
  height: 80px;
  input3: input4;
}

.container {
  background-color: #fffde7;
  height: 240px;
  border: 1px solid #fff9c4;
  input1: input2;
}

.item {
  background-color: #fbc02d;
  width: 90px;
  height: 90px;
  input3: input4;
  input5: input6;
}

.text-container {
  background-color: #ffebee;
  height: 150px;
  width: 250px;
  border: 1px solid #ffcdd2;
  input1: input2;
  input3: input4;
  input5: input6;
}