如何将元素居中对齐到已创建的玻璃态容器盒子内部？

修改说明 #

• 移除原有CSS中body样式后多余的闭合大括号，修复语法错误
• 为.container新增Flex布局属性，实现内部内容水平、垂直双向居中
• 可选新增.inside-box样式，调整内部元素间距，优化排版效果

完整修改后CSS代码 #

body {
    text-align: center;
    background: linear-gradient(to right, #159957, #5468ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
    font-family: "JetBrains Mono",monospace;
}

h3 {
    font-family: "JetBrains Mono",monospace;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(5px);
    /* 新增居中样式 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 可选优化样式，调整内部元素间距 */
.inside-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

原有HTML代码无需修改，直接复用即可。

效果截图 #

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