bootsrap 屏幕居中显示文字

要使文本在屏幕中央水平和垂直居中，可以使用以下HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center vertical-center">
      <h1>居中显示的文本</h1>
    </div>
  </div>
</div>

CSS代码：

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

这里使用了Flexbox布局，将文本框垂直和水平居中。同时，使用了Bootstrap的栅格系统，将文本框放置在一个容器中，并使用`text-center`类将文本水平居中。

相关问题

bootstrap文字居中

引用中提到，在Bootstrap中使文本居中可以通过在元素的class中添加"text-center"来实现。例如，可以使用以下代码将h1元素居中对齐：

<h1 class="text-center">文本</h1>

另外，如果想要在特定屏幕大小下使文本居中，可以使用Bootstrap的栅格系统。例如，可以在col-md-6元素中添加以下class来使其水平居中：

<div class="col-md-6 mx-auto"></div>

这将使该列在中等屏幕大小下居中对齐。

bootstrap 栅格中图片怎么文本居中

在Bootstrap栅格系统中，如果你想让图片和其上方的文本保持居中对齐，可以按照以下步骤操作：

1. 使用`.container`或`.container-fluid`作为布局容器，它包含了栅格系统的结构。

2. 在`.row`元素中添加一个`.col`类来设置列宽，比如 `.col-md-6` 表示在大屏幕（medium）上占据6个等宽单元。

3. 将图片放在`.col`内，并使用`.img-fluid`类使其自适应宽度并水平居中。例如：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <img src="your-image-url" alt="Your Image" class="img-fluid center-block">
      <p class="text-center">这是图片的文字描述</p>
    </div>
  </div>
</div>

这里我们还加了一个`.text-center`类到包含文字的`<p>`标签上，使得文本也居中对齐。