Bootstrap 4: Difference between text-center and justify-content-center - css

Question

Both text-center and justify-content-center seem to be doing much the same thing - centering text. But what's the difference?

Answer 1

Bootstrap 4 doesn't support for justify-text-center.
Source: Text
Maybe you're looking for something like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
I meant, justify-content-center
The difference is: justify-content-* is used to change the alignment of flex items.
If the div doesn't have property display: flex. It doesn't seem to work. While text-center doesn't require property display: flex.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<div style="background-color: red;">Item 1</div>
<div style="background-color: yellow;">Item 2</div>
<div style="background-color: blue;">Item 3</div>
</div>
<hr />
<div class="justify-content-center">
<div style="background-color: red;">Item 1</div>
<div style="background-color: yellow;">Item 2</div>
<div style="background-color: blue;">Item 3</div>
</div>

Answer 2

text-center
The text-align CSS property specifies the horizontal alignment of an inline or table-cell box.This means it works like vertical-align but in the horizontal direction. - MDN
.text-center {
text-align: center !important;
}
text-center aligns inline and table-cell element in the center of the element you use it for. It does not change the alignment of block elements.
justify-content-center
The items are packed flush to each other toward the center of the alignment container along the main axis.
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
In order for this to work, you need to use d-flex also. It aligns all the content of the element(inline, block,and flex) you use it for in the center of the element. By default, the content of the element is centered horizontally should you have not changed the flex-direction of the element.
You may find these links useful.
Inline Element
Block Element
Flexible Box Layout