CSS绘制Minecraft Steve艺术：面部无法渲染问题求助

以下是导致面部模块无法正常渲染的核心问题及修复方法：

• 单位语法错误：.face类中的height: 80 px和width: 80 px格式违规——CSS长度单位与数字之间不能有空格，浏览器无法识别带空格的80 px，必须写成80px才能生效。
• 容器定位失效：.container设置了top: 50%和left: 50%但未添加position: absolute，这两个定位属性仅对定位元素（relative/absolute/fixed等）生效。同时需要补充transform: translate(-50%, -50%)实现容器在页面中完美居中。
• HTML标签未闭合：<link>标签缺少闭合的>，会导致样式文件可能无法正常加载，需补全为<link rel="stylesheet" href="style.css">。
• 层级结构错误：面部元素未放入容器内部，导致相对定位基于整个body而非容器，位置严重偏离预期，需将.face的div嵌套进.container的div中。

修正后的CSS代码 #

.container {
    height: 500px;
    width: 500px;
    border-radius: 12.5%;
    box-shadow: 15px 15px rgba(0,0,0,0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255,255,255);
}
.face {
    position: relative;
    height: 80px;
    width: 80px;
    background: #B4846D;
    top: 210px;
    left: 210px;
}

修正后的HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="face"></div>
        </div>
    </body>
</html>

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