Texto não centralizado com conteúdo justificado: centro

Em um contêiner flexível, a propriedade de conteúdo justificado centraliza os itens horizontalmente, mas ele não tem controle direto sobre o texto desses itens. Quando o texto se ajusta ao item, ele mantém seu valor padrão text-align: start, resultando em texto não centralizado.

O contêiner flexível, os itens flexíveis e o texto representam três níveis distintos na estrutura HTML. justificar-content afeta os itens flexíveis, não o texto contido neles.

Se o item flexível preencher a largura de seu contêiner, ele não poderá ser centralizado, daí o texto desalinhado na quebra.

Para centralize o texto diretamente, atribua text-align: center ao item flexível ou contêiner por meio de herança.

Exemplo

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here