CSS如何实现Search按钮与底部固定Show按钮间文本垂直居中

可直接使用的CSS调整方案 #

你无需修改现有HTML结构，直接将原有CSS代码替换为以下内容即可实现需求：

body {
    margin: 0;
    min-height: 100vh; /* 让页面占满整个手机屏幕高度 */
    display: flex;
    flex-direction: column; /* 页面元素按从上到下的顺序排列 */
}

.level-buttons {
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.level-button {
    padding: 10px 20px;
}

.search-button {
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#search-button {
    padding: 10px 40%;
}

/* 让词汇区域自动填充搜索按钮和Show按钮之间的所有空白 */
.word {
    flex: 1; /* 占据页面剩余所有可用高度 */
    display: flex;
    align-items: center; /* 内部文字垂直居中 */
    justify-content: center; /* 内部文字水平居中 */
}

.word-text {
    color: rgb(0, 94, 0);
    font-size: 32px;
}

.show-button {
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#show-button {
    padding: 10px 40%;
    margin-bottom: 5vh; /* 保留和原代码一致的底部间距 */
}

调整说明 #

1. 给页面根元素body设置了全屏高度和纵向弹性布局，让元素可以自动分配屏幕空间
2. 给词汇展示区域添加了flex:1属性，它会自动占满搜索按钮和Show按钮之间的所有空白，配合弹性布局的居中属性，自然实现文字在该区域垂直居中
3. 去掉了Show按钮原来的绝对定位，用弹性布局天然固定在页面底部，适配不同尺寸手机更稳定，不会出现内容重叠问题

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