css中文字在方框中上下居中

CSS中文字在方框中上下居中是一个很常见的问题。通过一些CSS属性和技巧，我们可以轻松地解决这个问题。本文主要介绍以下两种方式：

方式一：使用line-height属性

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  line-height: 100px;
  text-align: center;
}
.box p {
  display: inline-block;
  vertical-align: middle;
} 

以上代码中，我们首先定义了一个固定宽高的方框，并将其边框设置为1像素的灰色。然后，我们通过line-height属性将其自身高度与包含的文本行高设为相同，从而使文本不会垂直偏移。最后，我们使用inline-block和vertical-align属性来将p元素居中对齐。

方式二：使用display: flex

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
} 

以上代码中，我们同样定义了一个固定宽高的方框，并将其边框设置为1像素的灰色。不同的是，我们将其display属性设为flex，并通过justify-content和align-items属性使其中的文本在水平和垂直方向上居中对齐。

总结起来，以上两种方式都可以实现垂直居中的效果。在实际开发中，可以根据需要灵活选择。另外，还有很多其他的实现方式，读者可以自行探索。