文字换行时将段落元素居中而不使用flex使文字居中

Question

在这被否决之前，我要说我已经搜索了许多看起来与此相似的SO问题，但是我发现没有一个解决了我的问题。

我正在使用flexbox将某些<p>标签在元素内水平和垂直居中放置。我不想将文本放在<p>元素内，而只是将<p>元素本身居中。

.app-outer {
  display: flex;
  flex-direction: column;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.app p {
  display: inline-block;
}

.title-bar {
  background-color: #202225;
  color: #72767D;
  font-weight: bold;
  padding: 0 0 2px 8px;
  display: flex;
  flex-direction: row;
  width: 100%;
}

<div class="app-outer">
  <div class="title-bar">
    <span class="draggable">Skipwars</span>
    <span class="btns">
      <button id="btn-minimize" tabindex="-1">-</button><!--
      --><button id="btn-close" tabindex="-1">&times;</button>
    </span>
  </div>
  <div class="app">
    <p>Add a browser source pointed at <!--<a href="#">http://localhost:3333/</a>--></p>
    <p>
      Optional parameter <code style="display:inline">threshold=n</code>. ex: <a
        href="#">http://localhost:3333/?threshold=4</a> (default 8)
    </p>
  </div>
</div>

我的应用是300像素宽（我正在使用电子）。

如您所见，如果该段落的文本不足以容纳多行，则可以正常工作。如果是这样，则该段落将扩展为.app的宽度，并且文本将左对齐。

这就是我要寻找的：

我认为将段落的display设置为inline-block可以达到目的，但事实并非如此。

Answer 1

它可以按预期工作，但是由于<p>标签与视口的宽度相同，因此当vp太小时，它们向左齐平，在这种情况下，URL太长以至于可以包装到下一行，并在第一行上留一个空格，使其看起来未居中。我在<p>标签中添加了一些水平填充以更好地说明：

.app-outer {
  display: flex;
  flex-direction: column;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.app p {
  display: inline-block;
  padding: 0 20px;
}

.title-bar {
  background-color: #202225;
  color: #72767D;
  font-weight: bold;
  padding: 0 0 2px 8px;
  display: flex;
  flex-direction: row;
  width: 100%;
}

<div class="app-outer">
  <div class="title-bar">
    <span class="draggable">Skipwars</span>
    <span class="btns">
      <button id="btn-minimize" tabindex="-1">-</button><!--
      --><button id="btn-close" tabindex="-1">&times;</button>
    </span>
  </div>
  <div class="app">
    <p>Add a browser source pointed at
      <!--<a href="#">http://localhost:3333/</a>--></p>
    <p>
      Optional parameter <code style="display:inline">threshold=n</code>. ex: <a href="#">http://localhost:3333/?threshold=4</a> (default 8)
    </p>
  </div>
</div>