你如何在没有外部 css 文件的情况下将 div 元素居中

Question

如何使 div 元素居中以响应使用外部 css 文件。我尝试使用其他人发布的引导类和内联样式，但都没有用。我想知道你们如何在没有外部 css 文件的情况下实现这一点。

原文由 user3088470 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

偏移量：第一个使用 Bootstrap 自己的偏移量类，因此它不需要更改标记，也不需要额外的 CSS。关键是将偏移量设置为等于行剩余大小的一半。因此，例如，大小为 6 的列将通过添加偏移量 3 居中，即 (12-6)/2。

在标记中，这看起来像：

 <div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
</div>

margin-auto：你可以使用 margin: 0 auto 来居中任何列大小；技术，你只需要处理由 Bootstrap 的网格系统添加的浮动。我建议定义一个自定义 CSS 类，如下所示：

 .col-centered{
    float: none;
    margin: 0 auto;
}

现在您可以将它添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作：

 <div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

原文由 Atul Nagpal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您不必支持旧浏览器，您可以查看 Flexbox。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

尝试这样的事情：

 <div style={{display: 'flex', justifyContent: 'center'}}>
  <div>centered content</div>
</div>

原文由 Jeff Fairley 发布，翻译遵循 CC BY-SA 3.0 许可协议