Элементы центрального блока или встроенного блока (один экземпляр в строке) без оболочки, но с зазором, похожим на заполнение

Question

Самый чистый способ центрировать (встроенный) блочный элемент без оболочки:

position: relative;
left: 50%;
transform: translateX(-50%)

Вертикальное центрирование аналогично.

Теперь мне нужно добавить промежутки между:

• левый край области просмотра и левый край элемента
• правый край области просмотра и правый край элемента

когда область просмотра становится уже и приближается к максимальной ширине элемента. Оба промежутка отмечены красными стрелками на изображении ниже.

Можно добраться до него без оболочки?

Я подготовил песочницу, чтобы сэкономить ваше время.

.MessageBox {

  /* it matters */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  max-width: 600px;
  width: 100%;

  /* just decorations */
  background: lightblue;
  padding: 6px 8px;
}

<div class="MessageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 1

Самый чистый способ центрировать (встроенный) блок элемент без оболочки - создать body{text-align:center}.

• Я не вижу никаких встроенных (block) элемент в вашем коде
• Если он блок, то margin:auto будет работать
• Даже если нет оболочки, у вас все еще есть html и тело как родитель
• Выравнивание по центру - это самый простой способ центрировать любой встроенный элемент

html,
body {
  padding: 0;
  margin: 0;
  border: 0;
}

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  padding: 0 20px;
}

.MessageBox {
  max-width: 600px;
  width: 100%;
  background: lightblue;
  padding: 6px 8px;
  display: inline-block;
}

<div class="MessageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 2

Вы можете сделать это с полем, но хитрость заключается в том, чтобы учесть его и внутри свойства left.

.MessageBox {

  /* it matters */
  position: relative;
  left: calc(50% - 20px);
  transform: translateX(-50%);
  
  max-width: 600px;
  margin:0 20px;

  /* just decorations */
  background: lightblue;
  padding: 6px 8px;
}

<div class="MessageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

С помощью CSS переменных вы можете легко настроить его:

.MessageBox {
  --gap:20px;
  /* it matters */
  position: relative;
  left: calc(50% - var(--gap));
  transform: translateX(-50%);
  
  max-width: 600px;
  margin:0 var(--gap);

  /* just decorations */
  background: lightblue;
  padding: 6px 8px;
}

<div class="MessageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Также можно сделать это с учетом только ширины:

.MessageBox {
  --gap:20px;
  /* it matters */
  position: relative;
  margin:auto;
  
  max-width: 600px;
  width:calc(100% - 2*var(--gap));

  /* just decorations */
  background: lightblue;
  padding: 6px 8px;
  box-sizing:border-box;
}

<div class="MessageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>