Текст в центре страницы, с такой-же шириной фона окошка, в котором он находится

Question

Как сделать так, чтобы текст был в центре страницы, но при этом - имел фон такой-же ширины как и текст?

То есть, получается нужно разместить окошко, в центре страницы, с шириной его содержимого, но не больше max-width - указанной максимальной ширины.

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

Пытался сделать так:

.window {
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  will-change: transform;
}

.window .win {
  max-width: 700px;
  max-height: 190px;
  margin: auto;
  z-index: 200;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 7px 3px;
  will-change: transform;
}

.window .win .wincon {
  width: auto;
  height: 190px;
  background: rgba(255, 255, 255, .9);
  overflow-y: auto;
}

<div class="window">
  <div class="win">
    <div class="wincon">
      <p>
        111111111
      </p>
      <p>
        222222222
      </p>
      <p>
        111111111
      </p>
      <p>
        222222222
      </p>
      <p>
        111111111
      </p>
      <p>
        222222222
      </p>
      <p>
        111111111
      </p>
      <p>
        222222222
      </p>
    </div>
  </div>
</div>

Но ничего не получается, должно быть так:

И так должно быть до максимальной указанной ширины.
Как такое сделать?
Вообще возможно ли?

Answer 1

Так?

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: gray;
  margin: 0;
}

.center-text {
  display: inline-block;
  max-width: 150px;
  max-height: 250px;
  overflow: hidden auto;
  background: #fff;
}

<div class="center-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Etiam mattis lobortis dui rhoncus auctor.</p>
  <p>Curabitur tristique finibus tortor sed porta.</p>
  <p>Mauris eleifend fermentum urna eu ultricies.</p>
  <p>Integer non tincidunt orci, a varius velit.</p>
</div>

БЛОГ НА HUSL

Текст в центре страницы, с такой-же шириной фона окошка, в котором он находится

Ответы (1 шт):