css - 在绝对定位的元素内居中

我想做一些简单的事情。我仍在研究CSS的所有问题，请耐心等待。我想本质上是一个div，将其放置为position: absolute; left: 10px; right: 10px; bottom: 10px，然后将其子代并在浏览器中水平居中。 This is my attempt at doing so：

HTML：

<div class="notificashun-holder">
    <div class="alert-message info notificashun">
        <p>Hello, World!</p>
    </div>
</div>

CSS：

.notificashun-holder {
    display: block;
    bottom: 10px;
    left: 10px;
    right: 10px;
    position: absolute;
}

.notificashun {
    display: inline-block;
    margin: 0 auto;
}

问题是，我使用的是Bootstrap，而alert-message类使项目成为display: block，因此我需要将它们“缩小”到正常大小（仅适合其内容的大小）。

有人可以帮我吗？我只需要将notificashun-holder设置为浏览器左，右和底部的十个像素，并且notificashun只能根据需要设置为大，并位于notificashun-holder的中心。

最佳答案

由于您正在为inline-block使用.notificashun元素，因此它会受到text-align属性的影响，因此，要使其居中，只需将text-align: center;属性应用于您的.notificashun-holder：

.notificashun-holder {
    display: block;
    bottom: 10px;
    left: 10px;
    right: 10px;
    position: absolute;

    /*New property:*/
    text-align: center;
}