Texto no centrado con justify-content: center

En un contenedor flexible, la propiedad justify-content centra los elementos flexibles horizontalmente, pero no tiene control directo sobre el texto dentro de esos elementos. Cuando el texto se ajusta dentro del elemento, conserva su valor predeterminado de alineación de texto: inicial, lo que da como resultado un texto no centrado.

El contenedor flexible, los elementos flexibles y el texto representan tres niveles distintos en la estructura HTML. justify-content afecta los elementos flexibles, no el texto contenido en ellos.

Si el elemento flexible ocupa el ancho de su contenedor, no se puede centrar, de ahí el texto desalineado al ajustarse.

Para centre el texto directamente, asigne text-align: center al elemento flexible o contenedor mediante herencia.

Ejemplo

.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