Javascript 如何使多个div沿画布底部居中？

所以我一直在玩弄我的代码已经有一段时间了，现在仍然是 无法使div元素沿着画布元素的底部正确居中。到目前为止，我掌握的代码让我比较接近，但它并不完全在那里。我已经在下面发布了相关的css片段，如果有人能给我一些指导，我将非常感激

#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}

.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}

---

添加一个容器div，也就是

内联块

，并将其设置为

文本对齐：居中

。这将确保所有

内联块

div锚定在页面中心

#容器{
文本对齐：居中；
显示：内联块；
}
#沙皮卡瓦斯{
宽度：800px；
高度：650px；
边框：1px实心#000000；
显示：块；
保证金：0自动；
}
.styleDiv{
颜色：#FFFFFF；
字体系列：“Verdana”；
背景色：#36648b；
边框：2倍实心#000000；
边界半径：5px；
填充物：5px；
显示：内联块；
宽度：150px；
高度：25px；
文本对齐：居中；
}

尝试将文本对齐：居中添加到#shapeCanvas css