Text not in the center of the webpage

Question

I'm trying to set a text to center of the webpage, I have a div element named calculator-frame that contains a frame for a calculator website I'm making in a webpage, I'm using CSS Right now, I already have everything in the html file.

The problem is that I can't make the text align in the center of the page, also, the buttons of the calculator are not in the center same as the title text. (not the document title)

This is the code I tried to align the text to the center of the webpage. styling.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: rgb(230, 218, 200);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

frameset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 400px;
    background-color: rgb(214, 189, 156);
    border: 4px solid #854f4f;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

I used Align-content to make the title in the center of the webpage, I used that same keyword for the buttons. The result is that the Title in the screen is not in the center of the webpage.

Now, i got a div element in the html file that contains the title text of the calculator (the title is not the document title, is a h2 text)

frame.htmnl

<frameset>
    <div class="calculator-frame">
        <h2 id="calcTitle">Reiko's Web Calculator</h2>
        
        <div class="container">
            <!-- Display section -->
            <section class="display">
                
            </section>
        </div>
    </div>
    <div class="calculator">
        <input type="text" id="display" readonly />
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="negativenum()">+/-</button>
            <button onclick="percentage()">%</button>
            <button onclick="divide()">÷</button>
        </div>
        <div class="operators">
            <button onclick="addDigit('7')">7</button>
            <button onclick="addDigit('8')">8</button>
            <button onclick="addDigit('9')">9</button>
            <button onclick="addDigit('6')">6</button>
            <button onclick="addDigit('5')">5</button>
            <button onclick="addDigit('4')">4</button>
            <button onclick="addDigit('3')">3</button>
            <button onclick="addDigit('2')">2</button>
            <button onclick="addDigit('1')">1</button>
            <button onclick="addDigit('0')">0</button>
            <button onclick="multiply()">x</button>
            </div>
        <div class="decimals">
            <button onclick="dot()" id="point">.</button>
            <button onclick="addDigit('.', 'right')">/</button>
            </div>
        </div>
    </div>
    </frameset>

I used frameset to set the content inside a frame in the webpage screen.

I appreciate any tip/help,

Answer 1

It is hard to know without seeing the rest of the code. It could be because the div is not using 100% of the container or for other reasons. Anyways, centring everything with flex always works, in almost any situation. You may need to create extra divs or apply the centre in multiple levels of your container structure.

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Edit: I forgot to mention that the flex centre will apply to the children's container, not himself.

More info about flex: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container