Bootstrap 4/Bootstrap 5，水平和垂直对齐内容使用伸缩盒

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

使用引导类align-items-center和justify-content-center

.page-hero { 身高:200 px; 背景颜色:灰色; ｝ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="匿名"> <div class="page-hero - d-flex align-items-center - align- content-center"> <h1>一些文本</h1> < / div >

//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

使用文本中心代替中心块。

或者在span元素上使用center-block(我把列做宽了，这样你可以更好地看到对齐):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

没必要把事情复杂化。使用Bootstrap 4，您可以简单地使用边缘自动类my-auto在列内水平对齐项

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

如果上述工作都没有(就像在我的情况下试图居中输入)，我使用Boostrap 4偏移量:

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>  

引导命名约定有自己的样式，col-XS-1指的是包含元素宽度的8.33%的列。你的文本很可能会远远超出指定的宽度，并且不可能居中。如果你想要它约束到div，你可以使用像css的断字。

要将内容集中在一个大到足以展开到文本之外的元素中，有两个选项。

选项1:HTML中心标签

<div class="row">
  <div class="col-xs-1 center-block">
    <center>
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </center>
  </div>
</div>

选项2:CSS文本对齐

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

如果你想把所有东西都限制在列的宽度

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

更新-使用Bootstrap的文本中心类

<div class="row">
  <div class="col-xs-1 center-block text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

FlexBox方法

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/