Javascript 按钮的绝对位置居中，但现在为全宽

我以前在一个项目中解决过这个问题，但我完全忘记了我是如何解决的，所以我想看看是否有人知道他们的想法：）

我将一个按钮绝对定位在容器底部，并使用left:0和right:0将按钮居中，但它会使其全宽。有什么办法可以防止这种情况发生吗

小提琴模型：

ul-li-img{
宽度：500px；
}
.ty-子类别\项目{
位置：相对位置；
保证金：0；
显示：内联块；
宽度：49%；
}
.ty-子类别\项目.徽标框{
宽度：58%；
显示：块；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
文本对齐：居中；
}
.ty-子类别\项目.logo-box.left.ty btn，
.ty-子类别\u项.logo-box.right.ty btn{
字体大小：0.7rem；
边框：2倍实心#fff；
颜色：#fff；
文本转换：大写；
背景：#f14fa1；
位置：绝对位置；
底部：20px；
左：0；
右：0；
}

 
而不是使用<代码>左：0 < /代码>和<代码>右：0 < /代码>，您可以考虑使用CSS转换来集中您的按钮。例如，您的声明块可能会变成：
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
    font-size: 0.7rem;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    background: #f14fa1;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
}

这是一个例子。希望这有帮助！如果你有任何问题，请告诉我

编辑：但是，如果希望将其置于黑匣子的中心（而不仅仅是按钮的父元素），则需要将父元素的宽度更新为类似以下内容：

.ty-subcategories__item .logo-box {
    width: 161px;
}

（我假设黑匣子是正方形的。）这是一个新的

编辑2：为了使定心工作有效，我们可以做一些数学运算：假设黑盒是正方形，并且图像的宽高比始终相同，我们可以计算出黑盒所占图像宽度的百分比，如下所示：

520（图像高度）/1610（图像宽度）*100%=32.3%

这是按钮父级所需的宽度。为避免按钮中的文本断开为多行，可以指定
空白
属性。所以你的CSS可以变成：

ul li img {
    width: 100%;
    height: 100%;
}
.ty-subcategories__item {
    position: relative;
    margin: 0;
    display: inline-block;
    width: 100%;
}
.ty-subcategories__item .logo-box {
    width: 32.3%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
    font-size: 0.7rem;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    background: #f14fa1;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

还有一个。让我知道这是否有帮助
 < P>而不是使用<代码>左：0 和<代码>右：0 ，可以考虑使用CSS转换来居中按钮。例如，您的声明块可能会变成：

.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
    font-size: 0.7rem;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    background: #f14fa1;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
}

这是一个例子。希望这有帮助！如果你有任何问题，请告诉我

编辑：但是，如果希望将其置于黑匣子的中心（而不仅仅是按钮的父元素），则需要将父元素的宽度更新为类似以下内容：

.ty-subcategories__item .logo-box {
    width: 161px;
}

（我假设黑匣子是正方形的。）这是一个新的

编辑2：为了使定心工作有效，我们可以做一些数学运算：假设黑盒是正方形，并且图像的宽高比始终相同，我们可以计算出黑盒所占图像宽度的百分比，如下所示：

520（图像高度）/1610（图像宽度）*100%=32.3%

这是按钮父级所需的宽度。为避免按钮中的文本断开为多行，可以指定
空白
属性。所以你的CSS可以变成：

ul li img {
    width: 100%;
    height: 100%;
}
.ty-subcategories__item {
    position: relative;
    margin: 0;
    display: inline-block;
    width: 100%;
}
.ty-subcategories__item .logo-box {
    width: 32.3%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
    font-size: 0.7rem;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    background: #f14fa1;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

还有一个。让我知道这是否有帮助
 这不会使按钮居中，而是使其在父元素中居中。你是说在黑匣子里吗？这不是按钮的父项。有点效果，似乎有些按钮文本由于某种原因会断开两行。。。还有，如果我想把按钮放在右边，我怎么能做到呢？我看到一些左右按钮。我将CSS拆分为logo-box.left和logo-box.right。顺便说一句，我在宽度上使用了一个%作为需要响应的宽度，因此需要避免固定宽度，除非你知道更好的方法使其响应。抱歉，尝试一下这个，我使图像响应：如果你调整大小，你会明白我的意思。需要在那个黑匣子里找到一个中心。设置为左还是右取决于按钮容器的位置。谢谢你的帮助！这不会使按钮居中，而是使其在父元素中居中。你是说在黑匣子里吗？这不是按钮的父项。有点效果，似乎有些按钮文本由于某种原因会断开两行。。。还有，如果我想把按钮放在右边，我怎么能做到呢？我看到一些左右按钮。我将CSS拆分为logo-box.left和logo-box.right。顺便说一句，我在宽度上使用了一个%作为需要响应的宽度，因此需要避免固定宽度，除非你知道更好的方法使其响应。抱歉，尝试一下这个，我使图像响应：如果你调整大小，你会明白我的意思。需要在那个黑匣子里找到一个中心。设置为左还是右取决于按钮容器的位置。谢谢你的帮助！