如何让居中按钮随屏幕尺寸自适应保持在div内？

核心问题分析 #

你的代码存在几个关键问题：

• 橙色容器#navbuttons固定高度60px，但按钮本身的内边距+边框高度已经超过这个值，小屏幕下更容易溢出
• 用相对定位top:15%实现垂直居中不可靠，容器布局逻辑混乱
• 按钮的内边距未做响应式调整，小屏幕下宽度占比过高

修改步骤及代码 #

1. 重构容器布局，用Flex实现稳定居中
   把#navbuttons和#Theactualbuttons改成Flex布局，彻底解决垂直水平居中问题，同时去掉固定高度（改用最小高度+内边距），避免按钮溢出：

#navbuttons {
    min-height: 60px; /* 保留最小高度，允许容器根据内容自适应 */
    padding: 0.5em; /* 给容器加内边距，避免按钮贴边或溢出 */
    background-color: #ff7300;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

#Theactualbuttons {
    /* 移除相对定位，交给Flex布局处理居中 */
    display: flex;
    gap: 1em; /* 如果有多个按钮，添加间距，可选 */
}

2. 优化按钮的响应式适配
   给按钮添加媒体查询，在小屏幕下缩小内边距，同时限制按钮的最小宽度，保证按钮不会过度挤压变形：

button {
    --hover-shadows: 16px 16px 33px #ffffff,
                     -16px -16px 33px #ffffff00;
    --accent: rgb(255, 255, 255);
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 1.1em;
    background-color: #ff7300;
    color: white;
    padding: 1em 2em;
    transition: box-shadow ease-in-out 0.3s,
                background-color ease-in-out 0.1s,
                letter-spacing ease-in-out 0.1s,
                transform ease-in-out 0.1s;
    border: 3px solid #ffffff;
    display: block;
    min-width: 120px; /* 限制最小宽度，避免按钮太窄 */
    box-sizing: border-box; /* 确保边框和内边距算入总宽度/高度 */
}

/* 小屏幕下调整按钮内边距 */
@media (max-width: 480px) {
    button {
        padding: 0.8em 1.5em;
        font-size: 0.9em;
    }
}

3. 修复语法错误
   原代码中#Theactualbuttons的样式未闭合，补上}即可。

完整修改后代码 #

button {
    --hover-shadows: 16px 16px 33px #ffffff,
                      -16px -16px 33px #ffffff00;
    --accent: rgb(255, 255, 255);
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 1.1em;
    background-color: #ff7300;
    color: white;
    padding: 1em 2em;
    transition: box-shadow ease-in-out 0.3s,
                background-color ease-in-out 0.1s,
                letter-spacing ease-in-out 0.1s,
                transform ease-in-out 0.1s;
    border: 3px solid #ffffff;
    display: block;
    min-width: 120px;
    box-sizing: border-box;
}

button:hover {
    box-shadow: var(--hover-shadows);
}

button:active {
    box-shadow: var(--hover-shadows),
                 var(--accent) 0px 0px 30px 5px;
    background-color: var(--accent);
    transform: scale(0.95);
}

#navbuttons {
    min-height: 60px;
    padding: 0.5em;
    background-color: #ff7300;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Theactualbuttons {
    display: flex;
    gap: 1em; /* 多个按钮时添加间距，不需要可删除 */
}

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