<div class="container-fluid">
    <div class="row">

        <div class="col-md-10 col-md-offset-1">
            <div class="alert alert-warning alert-dismissible fade in text-center" role="alert">
                <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
            </div>
        </div>

  </div>
</div>

类text-center按预期运行。将.alert Package 在Bootstrap Grid中还可以限制通知的总宽度。
仔细检查你没有额外的CSS可能会覆盖你的代码。这在Bootply中进行了测试：http://www.bootply.com/MFv1HMC0G7

如果您希望将整个警报居中对齐，请使用center-block而不是text-center和alert。

<div class="alert alert-info center-block" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong>  It's just an alert... </div>

如果要在警报内居中对齐文本，请使用：

<div class="alert alert-info" style="width: 80%;" role="alert">
    <p class="text-center">
     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>        <strong>Hey!</strong>  It's just an alert... 
    </p>
</div>

为了在不添加额外容器的情况下将警报与中心对齐，我自定义了Bootstrap警报类，如下所示。

.alert {
  left: 0;
  margin: auto; // Centers alert component
  position: absolute; // So that it will display relative to the entire page
  right: 0;
  text-align: center; // Centers 'Alert Test' text
  top: 1em;
  width: 80%;
  z-index: 1; // Displays over app and bootstrap Navbar
}

如果你不想直接从Bootstrap重写基类alert，你可以将该类重命名为你喜欢的任何名称，并引用该类。
为此，我使用React来显示我的组件，并像这样包含它们：
Alerts.jsx

<div className="alert alert-primary alert-dismissable fade show" role="alert">
  Alert Test
  <button className="close" type="button" data-dismiss="alert">
    <span>&times;</span>
  </button>
</div>

App.jsx

<>
  <Alerts />
  <Navigation />
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/login" component={LoginPage} />
  </Switch>
</>

Alerts.jsx组件被导入到App.jsx组件中，结果如下所示。

在Bootstrap 5中，使用d-block沿着text-center。

<div class="alert alert-info d-block text-center" role="alert">
     Centered Text                
 </div>