css中文字在盒子中居中

CSS中文字在盒子中居中对于页面设计和排版极为重要，可以让网页效果更加美观，符合视觉美学。下面介绍两种常用的居中方式。

/* 第一种方式：使用text-align属性 */
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  text-align: center; /* 文字在盒子中水平居中 */
  line-height: 100px; /* 文字在盒子中垂直居中 */
}

/* 第二种方式：使用flex布局 */
.box {
  display: flex;
  justify-content: center; /* 文字在盒子中水平居中 */
  align-items: center; /* 文字在盒子中垂直居中 */
} 

两种方式都可以实现文字在盒子中的水平居中和垂直居中，视具体情况选择使用。需要注意的是，第二种方式使用flex布局需要注意浏览器兼容性。

此外，还可以根据需要使用其它方式实现文字在盒子中的居中，比如通过绝对定位、transform属性等等。