div里面的文字怎么居中

以下是两种将div里面的文字居中的方法：

1. 使用display: table和display: table-cell属性

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: red;
  display: table;
}

.box .a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: blue;
}
</style>

<div class="box">
  <div class="a">love</div>
</div>

2. 使用display: table-cell、text-align: center和vertical-align: middle属性

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

img {
  /* 设置成块元素后，text-align：center 就会失效 */
  width: 100px;
  height: 100px;
}
</style>

<div class="box">
  <img src="1.jpg" alt="">
</div>