html文字水平垂直居中代码

晋新宁 2周前 14浏览 0评论

在网页开发中，我们经常需要将文字水平垂直居中，这个可以使用一些CSS技巧实现，同时也需要使用HTML代码来定义文本内容。下面是一个基础的HTML代码：

<div class="center">
  <p>Hello World</p>
</div>

这个HTML代码定义了一个名为"center"的div容器，里面包含了一个段落标签p，内容为"Hello World"。接下来，我们使用CSS来实现文字的水平垂直居中。

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

这个CSS代码定义了一个名为"center"的类，使用了Flex布局，设置了其子元素在主轴和侧轴方向上的居中方式，同时也设置了"center"这个容器的高度为整个视口的高度。同时，我们也定义了段落标签p的文本居中方式。

以上代码的效果就是将文字水平垂直居中，类似于这个例子：

Hello World