居中对齐的图像与 CSS 中的位置冲突答案

【问题标题】：Centering Image with centre align clashing with Position In CSS居中对齐的图像与 CSS 中的位置冲突
【发布时间】：2022-01-11 14:10:36
【问题描述】：

我是 html 和 css 的新手，最近我开始制作画布游戏。我希望有一个图像并将其与 HTML 对齐在画布的中心。我使用了 'position: Absolute' 属性，至少可以将它放在画布上，但是当我使用 'text-align: center' 属性时，我的 position 属性停止工作并位于画布下方。

所以我想知道，我如何才能使我的图像在画布上居中。

CSS

#startgameimg{
    text-align:center;
    width: 50px;
    display:block;
    margin:auto;    
    position: absolute;
    cursor: pointer;
    
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GAME</title>

    <link href = "style.css" rel = "stylesheet">
</head>
<body>
    
    <div style = "text-align: center;">    
        <canvas 
            id = "canvas" 
            height = "560"
            width = "800"
            style = "border:5px solid rgb(33, 8, 61)"
            >Your Browser is Not Supported</canvas>

            <div id = 'start'>
                <img src = "play.png" alt = "" id = "startgameimg"/>
            </div>
    </div>
    <script src = "script.js" ></script>
</body>
</html>

请注意：我经历了大约 5 到 6 个关于同一主题的 Stack Overflow 问题，但找不到任何解决方案

【问题讨论】：

显示：弹性；证明内容：中心；对齐项目：居中；使用它并检查

标签： javascript html css canvas

【解决方案1】：

#startgameimg{
    text-align:center;
    width: auto;
    display:block;
    margin:auto;    
    position: absolute;
    cursor: pointer;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
    
}

 <div style = "text-align: center; position: reletive">    
        <canvas 
            id = "canvas" 
            height = "560"
            width = "800"
            style = "border:5px solid rgb(33, 8, 61)"
            >Your Browser is Not Supported</canvas>

            <div id = 'start'>
                <img src = "play.png" alt = "MY IMG" id = "startgameimg"/>
            </div>
    </div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
非常感谢。很有帮助