Bootstrap4 Modal-title not fully centered - html

Question

!Do not close it as duplicate, the answers in the "duplicate" only center it relative to the X button!
I'm trying to completely center the modal-title of a bootstrap4 modal.
However, it only centers it relative to the X and not to the whole width of the modal. The answers here: Bootstrap 4 Modal Center Content all have the same issue.
https://jsfiddle.net/couthzLt/
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center d-block">
<h5 class="modal-title d-inline-block" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The header is not completely centered as you can see on this image that:
modal header centered relative to X
My question is if it's possible to center it to the right edge of the modal - not the X.

Answer 1

By default close is positioned using float:right which keeps it as part of the document flow. Because of this modal-title is always going to center itself respective of the width available minus what close is using.
To fix the problem we need to pull close out of the flow. Easiest way to do that is:
.close {
position: absolute;
right: 1rem;
}
position: absolute pulls the class out of the normal flow which in turn lets modal-title take up the full width. The right margin is designed to replicate the margins defined for the Modal component to ensure that your layout remains more or less unchanged.

Answer 2

Put text-center d-block in modal-header
Put up button dismiss
Last modal title.
<div class="modal-header text-center d-block">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Title center</h2>
...
</div>

Answer 3

How about something like this:
#exampleModalLabel {
position: absolute;
left: 0;
right: 0;
margin: auto;
}

Answer 4

On my side, I did the following:-
NOTE: The size of my modal was default, it was not large or small.
Then in Modal::begin I added titleOptions as below
Modal::begin([
'title' => 'yor title ...',
'titleOptions' => ['style' => ['margin-left' => '95px']],
...other options..
]);