CSS中居中对齐与position属性冲突，如何实现canvas内图片居中

问题根源 #

1. position: absolute 定位的元素，默认相对于整个页面根节点偏移，你没有给包裹canvas的父容器设置position: relative，导致图片的定位基准不符合预期。
2. text-align: center 仅对行内/行内块元素生效，对你设置了position: absolute和display:block的图片完全无效；同时未设置上下左右偏移值时，margin: auto也不会对绝对定位元素生效。

解决步骤 #

1. 修改HTML结构 #

给包裹canvas和图片的外层div添加position: relative属性，作为图片的定位基准，示例如下：

<!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添加position: relative，作为定位基准 -->
    <div style="text-align: center;position: relative;">    
        <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>

2. 修改CSS样式 #

移除#startgameimg中无用的属性，添加偏移位移属性实现居中：

#startgameimg{
    width: 50px;
    display:block;
    position: absolute;
    cursor: pointer;
    /* 居中核心代码 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

实现原理 #

left: 50%和top: 50%会把图片的左上角对齐父容器的中心点，transform: translate(-50%, -50%)会把图片自身向左、向上偏移自身宽高的50%，最终实现完全居中，该方案不用手动计算canvas和图片的尺寸，自适应能力更强。

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