面试官：请实现单行文本居中，多行文本左对齐？

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

什么是单行文本居中，多行文本左对齐？

为了准确的向大家阐述，这是什么意思？我特意做了一个GIF动图，这样能够更好的帮助大家理解什么是单行文本居中，多行文本左对齐。

实现方法

实现方式1：相对定位 + transform + inline-block

之所以要设置inline-block是因为这样可以让元素的宽度有子元素决定。

• HTML结构

  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>

• css结构

.father {
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
.text {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

实现方式2：父级text-align: center，子级inline-block + text-align: left

这种方式的实现原理是，当子元素的宽度没有父元素的宽度宽的时候，此时应用的是行内块元素和左对齐，但是父盒子设置了居中对齐，所以显示的是居中，一旦子元素的宽度达到了两行，第二行就开始应用左对齐了。

• HTML结构

  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>

• CSS样式

.father {
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
  text-align: center;
}
.text {
  display: inline-block;
  text-align: left;
}

实现方式3：table布局 + margin: 0 auto;

• HTML结构

  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>

• CSS样式

.father {
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
.text {
  display: table;
  margin: 0 auto;
}

实现方式4：flex布局 + justify-content: center

• HTML结构

  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>

• CSS样式

.father {
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
.text {
  display: flex;
  justify-content: center;
}

实现方式5：grid布局 + justify-items: center

.text {
  display: grid;
  justify-items: center;
}

单行文本居中，多行文本左对齐，是一道非常考查候选人CSS基本功的题目，从这个问题可以看出，我们的CSS基础还仍待提高。