Setting width of centered <div> using "display:flex" & "justify-content:center"

I've come out of stackeroverflow lurking because I'm scratching my head trying to figure this out.

I am trying to use "display:flex" & "justify-content:center" to center a div, but whenever I try to use "width:800px" it makes the width of the div 100% of the page.

Can anyone recommend how best to set the width of my div whilst also centering it?

body {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            background-color:black; }
    
    h1 {
            line-height:87%;
            color:yellow; }
    
    .page {
            display:block;
            z-index:1;
            height:100%;
            width:100%; }
    
    .centerA
            {
            position:relative;
            z-index:2;
            top: 5%;
            display:flex;
            justify-content:center;
            min-width:100vh; }
    
    .center {
            z-index:3;
            position:relative;
            text-align:center;
            top: 5%;
            background-color:black;
            border-style:solid;
            border-width:1px;
            border-color:orange;
            font-size:250%; }

<html> 
<div class="page">
            <div class="centerA">
                <div class="center">
                    <h1> This is a test page
                    </h1>
                </div>
            </div>
    </div>
    
    
    </html>

Solution

The centerA was given width 100vh which was the issue. I have updated the code below. justify-content works the way it is expected.

body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        background-color:black; }

h1 {
        line-height:87%;
        color:yellow; }

.page {
        display:block;
        z-index:1;
        height:100%;
        width:100%; }

.centerA
        {
        position:relative;
        z-index:2;
        top: 5%;
        display:flex;
        justify-content:center;
        }

.center {
        z-index:3;
        position:relative;
        text-align:center;
        top: 5%;
        width: 200px;
        background-color:black;
        border-style:solid;
        border-width:1px;
        border-color:orange;
        font-size:250%; }

<html> 
<style>



</style>





<div class="page">
        <div class="centerA">
            <div class="center">
                <h1> This is a test page
                </h1>
            </div>
        </div>
</div>


</html>