网页计算器标题及按钮无法居中的CSS布局问题求助

核心问题 #

你误用了<frameset>标签——这是HTML4中用于框架页的旧元素，现代浏览器不推荐用它做普通布局容器，它的默认行为会干扰flex布局的生效，这就是标题和按钮无法居中的根本原因。

具体修改方案 #

1. 替换HTML中的<frameset>标签

把所有<frameset>换成普通的<div>，并给最外层容器加一个类（比如calculator-container），修正后的HTML结构如下：

<div class="calculator-container">
    <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>

2. 调整CSS样式

将原有的frameset选择器替换为新的容器类calculator-container，同时补充标题和按钮的居中样式：

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样式到新容器 */
.calculator-container {
    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);
    padding: 1rem; /* 增加内边距避免内容贴边 */
}

/* 标题居中 */
#calcTitle {
    text-align: center;
    margin: 0 0 1rem 0; /* 调整间距 */
}

/* 按钮容器布局，让按钮整齐排列 */
.calculator .buttons,
.calculator .decimals {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 按4列排列 */
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* 修正operators容器的列数（适配11个按钮） */
.calculator .operators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* 让输入框居中并占满宽度 */
#display {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    text-align: right; /* 计算器输入框默认右对齐更合理 */
    border: 2px solid #854f4f;
    border-radius: 5px;
    box-sizing: border-box;
}

额外说明 #

• <frameset>仅用于HTML4的框架页面（配合<frame>），现代HTML布局应使用<div>、<section>等语义化容器。
• 用Grid布局按钮比Flex更适合计算器的网格排列，能让按钮自动对齐且尺寸均匀。
• 给容器添加内边距可以避免内容紧贴边框，提升视觉效果。

内容的提问来源于stack exchange，提问作者Reikko War