div文字元素实现上下左右水平居中

可以使用 CSS 的 flex 布局来实现元素的水平居中和垂直居中。

CSS 代码如下：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度 */
}

.text {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

HTML 代码如下：

<div class="container">
  <div class="text">居中文本</div>
</div>

在上面的代码中，我们通过 flex 布局将容器设置为居中显示，并将子元素（即文本元素）也设置为居中显示。同时，我们也设置了容器的高度为视口高度，以充满整个屏幕。