以块显示格式将 HTML/CSS 中的多个对象居中

Question

我有两个 canvas 元素，“canvas1”和“canvas2”，位于 div、“容器”中。我试图让这些 canvas 元素以基本 display: block; 格式显示，就像它们通常被自动格式化一样，但是当试图将 div 或 div 中的元素完全居中时它总是会产生古怪的结果。

canvas、“canvas3”的 CSS 代码可以正确居中，但是当应用于 div 时，canvas里面的元素不会移动。

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Position</title>
</head>


<body>
    <div id="container">Hello
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>

    <canvas id="canvas3"></canvas>

    <style>
        #container {
            margin-left: auto;
            margin-right: auto;
        }
        
        canvas {
            height: 150px;
            width: 150px;
            border: 2px solid black;
            display: block;
        }
        
        #canvas1 {
            background-color: khaki;
        }
        
        #canvas2 {
            background-color: springgreen;
        }
        
        #canvas3 {
            background-color: navajowhite;
            margin: auto;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</body>

</html>

注意：运行摘录时，请务必查看整页。

实现此目的的方法不需要包含任何东西，只需要使用块显示属性的 2 canvas 元素，或产生相同外观的其他方法。上面显示的尝试在 div 中包含 canvas 元素，但我不确定这是否是实现我的目标的最佳方法。任何帮助将不胜感激。

The result needs to look like this.

Answer 1

将 margin:auto 添加到 canvas 样式，我更改了 #container 如下所述。

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Position</title>
    </head>
    
    
    <body>
        <div id="container">Hello
            <canvas id="canvas1"></canvas>
            <canvas id="canvas2"></canvas>
            <canvas id="canvas3"></canvas>
        </div>
    
        <style>
            #container {
                position: absolute;
                left: 50%;
                top: 50%;
               -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
             }
            
            canvas {
                height: 150px;
                width: 150px;
                border: 2px solid black;
                display: block;
                margin: auto;
            }
            
            #canvas1 {
                background-color: khaki;
            }
            
            #canvas2 {
                background-color: springgreen;
            }
            
            #canvas3 {
                background-color: navajowhite;
                right: 0;
                left: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    </body>
    
    </html>

Answer 2

#container {
    display: flex;
    flex-direction: column;
}
#canvas1 {
    background-color: khaki;
     margin: 0 auto;
}
            
#canvas2 {
     background-color: springgreen;
      margin: 0 auto;
}

以块显示格式将 HTML/CSS 中的多个对象居中

Centering multiple objects in HTML/CSS in block display format

html

css

margin

css-position

html5-canvas