Html 如何从按钮的中间而不是左轴居中对齐按钮

我做了一个按钮，把它放在一个div中，将div和按钮居中对齐，但是按钮从最左侧对齐，使它看起来偏离中心。有没有办法使它从实际中心的位置对齐

.btndiv{
宽度：80%；
高度：500px；
保证金：0自动；
文本对齐：居中；
}
.测试按钮{
位置：绝对位置；
底部：0px；
宽度：30%；
高度：50px；
}

钮扣

您可以使用flexbox执行此操作：

以下是更新的代码段：

.btndiv{
宽度：80%；
高度：500px；
保证金：0自动；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
}
.测试按钮{
宽度：30%；
高度：50px；
保证金：0自动；
}

钮扣

定义其在

左侧的位置：50%即，。在中间添加
transform:translateX（50%）到元素，以便它将剪切不需要的空间，并自动将项目与中心对齐


.btndiv{
宽度：80%；
高度：500px；
保证金：0自动；
文本对齐：居中；
}
.测试按钮{
位置：绝对位置；
底部：0px；
宽度：30%；
高度：50px；
左：50%；
转化：translateX（-50%）；
}

钮扣
在下面添加css，您就完成了

.testbutton {
    left: 0;
    right: 0;
    margin: auto;
}

另外，如果你想将其垂直居中对齐，请在css下方添加

.testbutton {
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
}


.btndiv{
宽度：80%；
高度：500px；
保证金：0自动；
文本对齐：居中；
}
.测试按钮{
左：0；
右：0；
保证金：自动；
}
.测试按钮{
位置：绝对位置；
底部：0px；
宽度：30%；
高度：50px；
}

钮扣
对于对齐元素，始终建议使用“网格”，示例见代码段：


.grid容器{
显示：网格；
网格模板列：自动；
}
.表格项目{
背景色：rgba（255、255、255、0.3）；
边框：1px实心rgba（0,0,0,0.1）；
填充：10px；
字体大小：10px；
文本对齐：居中；
}

钮扣