Html 在相对父容器中居中绝对按钮的正确方法

我已经达到了我想要的结果。但这不是正确的方法。例如，如果我的父容器改变了宽度，这种方法就行不通了。然而，我这样做只是为了让它出现在屏幕上，尝试在浏览器中以正确的方式解决问题

HTML

---

在你的.btn上使用这个。这将使您的btn中心水平。 :

---

正如我在评论中所说，为按钮做一个包装，并

position:absolute将其放到底部。然后，只要从按钮中删除样式，它就会居中，因为包装器具有
text align:center在上面


.product img包装器{
文本对齐：居中；
}
.产品img包装器img{
宽度：200px；
高度：200px；
}
.产品包装{
位置：相对位置；
利润率：50px0；
}
.产品卡{
位置：相对位置；
最大宽度：330px；
高度：450px；
边框：1px实心#eee；
保证金：25px自动0自动；
文本对齐：居中；
左侧填充：20px；
右边填充：20px；
盒影：7px 7px 5px#838485；
}
.产品卡片.卡片底部{
位置：绝对位置；
底部：15px；
宽度：100%；
左：0；
}

46-460 12 1/2英寸。变速MIDI-车床®
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实

我不想用另一个黑客来解决这个问题。CSS转换不应该是解决定位问题的方法。尽管它确实取得了成果。谢谢你的意见！您也可以使用left:50%和left:-100px；要将.btnw居中，为什么需要绝对定位？不同的产品标题链接和简短的产品描述并不总是具有相同的字符数。如果我只是在.btn元素上做一个上边距。并非所有按钮都会在布局中对齐。如果我绝对定位按钮，无论副本和标题的长度如何，它们都不会移动。然后绝对定位按钮的容器，然后只应用
text align:center到该容器。刚刚尝试。。。给我看一些适用于这种情况的代码。我将.btn包装在一个容器中，所有容器都嵌套在.product card容器中。为.btn容器提供了一个位置：绝对、底部：10px和文本对齐中心。仍然不是中心。产品卡。希望我错过了一些简单的东西…这很有效。除了宽度：100%之外，这就是我的代码？这会如何影响容器内的中心定位？它会使容器占据卡的整个宽度，那么容器内的任何东西都将是容器和卡的中心，因为它们的宽度相同。别忘了标记为已接受的答案！这就是黑魔法——唯一对我有用的东西！谢谢
<div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="product-wrapper">
                            <div class="product-card">
                                <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a>
                                <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
                                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                <a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a>
                            </div>
                        </div>
                    </div>
                </div>
</div>

.product-img-wrapper {
   text-align: center;
}

.product-img-wrapper img {
    width: 200px;
    height: 200px;
}

.product-wrapper {
    position: relative;
    margin: 50px 0;
}

.product-card {
    position: relative;
    max-width: 330px;
    height: 450px;
    border: 1px solid #eee;
    margin: 25px auto 0 auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 7px 7px 5px #838485;
 }

.product-card .btn {
    position: absolute;
    min-width: 200px;
    bottom: 15px;
    left: 60px;
 }

left: 50%;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 transform: translateX(-50%);