使用position: absolute时图片无法居中的问题求助

问题描述 #

我正在跟随某教程学习，在26:30处教程作者用position: absolute将250x250的.png格式logo移到屏幕中央，但我无法实现相同效果——图片一直停在屏幕右侧。我的字体为Regular 400，和教程参数一致。

我试过更换教程用的字体和图片，问题没解决；也尝试过不同的position属性值，同样没用。当前屏幕效果是图片位于右侧。

我的代码 #

CSS代码 #

body {
    display: flex;
    align-items:center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #5c71e9;
}

#game-board {
    border-radius: 100px;
    display: grid;
    grid-template-columns: repeat(20, 20px);
    grid-template-rows: repeat(20, 20px);
    margin: 5px;
}

.game-border-1 {
    border: #010101 solid 10px;
    border-radius: 30px;
    box-shadow: inset 0 0 0 10px #010101;
}

.game-border-2 {
    border: #454344 solid 8px;
    border-radius: 26px;
    box-shadow: inset 0 0 0 10px #454344;
}

.game-border-3 {
    border: #b2b3b5 solid 30px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 5px #b2b3b5;
    background-color: #010101;
}

#instruction-text {
    position: absolute;
    top: 62.5%;
    color: #fefdf9;
    text-shadow: #b2b3b5 0px 3px 0px;
    width: 400px;
    font-size: 25px;
    text-align: center;
    text-transform: capitalize;
    padding: 30px;
    margin: 0;
}

.scores {
    display: flex;
    justify-content: space-between;
}

#score {
    color: #fefdf9;
}

#score,
#highScore {
    font-size: 40px;
    font-weight: bolder;
    margin: 10px 0;
}

#highScore {
    color: #010101;
    display: none;
}

.snake {
    background-color: #fefdf9;
    border: #454344 1px dotted;
}

.food {
    background-color: #ff0000;
    border: #fefdf9 5px solid;
}

#logo {
    position: absolute;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap" rel="stylesheet">
        <title>Snake</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <div>
            <div class="scores">
                <h1 id="score">000</h1>
                <h1 id="highScore">000</h1>
            </div>
            <div class="game-border-1">
                <div class="game-border-2">
                    <div class="game-border-3">
                        <div id="game-board"></div>
                    </div>
                </div>
            </div>
        </div>
        <h1 id="instruction-text">Press "Space" to start!<h1>
        <img id="logo" src="game-logo.png" alt="snake-logo">
    </body>
</html>

问题原因及解决方法 #

原因 #

仅设置position: absolute不会自动让元素居中，绝对定位元素默认会停留在它在文档流里的原始位置。你的body设置了display: flex，默认横向排列子元素，logo在文档流中被挤到右侧，加上position: absolute后虽脱离文档流，但位置还是停在右侧。

解决方法 #

修改#logo的CSS样式，添加居中偏移属性：

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

• top: 50% 和 left: 50%：把元素的左上角定位到视口中心位置
• transform: translate(-50%, -50%)：让元素自身向左、向上移动自身宽高的50%，最终实现元素中心和视口中心对齐

另外建议合并body的两个样式规则，避免重复：

body {
    display: flex;
    align-items:center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: #5c71e9;
}

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