Twitter bootstrap 将内容放在Bootstrap 4中的列中居中

我需要帮助来解决这个问题，我需要在bootstrap4的列中集中内容，请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

---

在Bootstrap 4中有多种水平居中方法

• 文本中心

  用于中心

  显示：内联

  元素

• offset-*

  或

  mx auto

  可用于中柱（

  col-*

  ）
• 或者，

  将
  行上的
  内容中心对齐到中心列（
  列-*
  ）

• mx auto

  用于居中

  显示：块
  d-flex内部元件
  

mx auto

（自动x轴边距）将居中

显示：块

或

显示：flex

具有定义宽度的元素（%vw、px等）。默认情况下，在轴网柱上使用Flexbox，因此也有各种Flexbox居中方法

在您的情况下，使用

mx auto

将

col-3

居中，并使用

文本中心将其内容居中

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

另请参见：

将类
文本中心添加到您的列中：

<div class="col text-center">
I am centered
</div>


我居中

中间文本在这里

我使用了
justify content center
类，而不是中的
mx auto

查看

中心内容

.row>.col、.row>[class^=col-]{
填料顶部：.75rem；
填充底部：.75rem；
背景色：rgba（86,61124,15）；
边框：1px实心rgba（86,61124,2）；
}

第1页，共3页
第1页，共2页
三分之三
2020：类似问题

如果您的内容是一组要在页面上居中的按钮，请将它们包装在行中，然后使用调整内容中心。

示例代码如下：

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>


行动A
行动B
行动C
非常简单的答案在引导程序4中，更改此选项

<row>
  ...
</row>


...

对此

<row class="justify-content-center">
  ...
</row>


...
Use可以使用
class=“text center”
。我尝试过使用它，但它对Bootstrap4不起作用，文本本身正在居中，但我需要类为“nauk info connections”的div本身在col-3 div内居中对齐。我使用了容器居中的传统方法。nauk info connections{边框半径：50%；边框：1px实心$nauk橙色；高度：100px；宽度：100px；边距：0自动；}这已经包含在@Jean-François Corbett中，我使用了justify content center类而不是mx auto。这也是一种方法。人们也可以使用它，我只是想帮助他人。谢谢，对。好吧，一点解释可以大有帮助。谢谢。我在任何示例或引导文档中都没有看到horizo非内联元素在不同断点处的ntal居中。例如，将
居中于md及以上位置，但在md下方左对齐。如果您使用引导4
选择
它是display:block，而不是display:inline，因为
表单控件
是display:block。当然，最初的问题不是使用responsive断点，所以答案中没有解释。这是唯一对我有效的解决方案。呸！谢谢；）唯一有效的解决方案！太好了！
<row>
  ...
</row>

<row class="justify-content-center">
  ...
</row>