css 文本在容器中剧中

CSS文本在容器中剧中是非常常见的需求，下面我们借助pre标签来演示一下如何实现文本剧中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上代码是采用flex布局实现容器中的文本居中。其中display属性设置为flex，使得容器变成弹性盒子，而justify-content和align-items属性设置为center，则让子元素水平和垂直方向上都居中。

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

除此之外，采用定位的方式也可以实现文本在容器中的居中，如上所示的代码。首先容器设置为相对定位，然后要居中的文本设置为绝对定位，并通过top、left属性将文本移到容器的中心，最后利用transform属性，将文本整体向左、右移动50%来实现水平、垂直方向的剧中。

总的说来，实现文本居中的方式还是比较多的，视实际需求而定。不过以上的两种方式可以说是比较常用，希望对你有所帮助！