css如何实现让div中的多行文字居中显示

标题css如何实现让div中的多行文字居中显示

最近在做项目的时候遇到一个div中有多行文字（可能一行也可能多行）需要实现居中显示，试了好多方法都不行，显然不能使用padding来居中，因为文字有多少行不确定。
解决办法：

<div>
  <div>
    文字
    文字
  </div>
</div>

在文字外面套一层div，设置div的居中，文字也就随着居中了。
实现居中方法：
第一种
基于绝对定位，要求有固定的宽高

main{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5em;
  margin-left: -9em;
  
  width: 18em;
  height: 10em;
}

注：什么是em单位？
em是一个相对的度量单位，对于浏览器来说，1em=16px，16px为浏览器的默认字体大小。

使用calc方法对第一种进行简化

main{
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 9em);
 
  width: 18em;
  height: 10em;
}

第二种
在translate变形函数中使用百分比， 不依赖固定宽高

缺点：

1. 有时候不能使用绝对定位

2. 如果需哟啊居中的元素已经在高度上超过了视口， 那么他的顶部会被视口裁剪掉

3. 在某些浏览器中，这个方法肯会导致元素的显示有一些模糊，因为元素可能被放置在半个 像素上。

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  padding: 1em;
}

第三种
基于视口单位vh

main{
  margin: 50vh auto;
  transform: translateY(-50%);
  width: 18em;
}

为什么不能以下代码来做那？

margin: 50% auto 0 ;
transform: translateY(-50%);

因为margin的百分比值是以父元素的宽高来做解析基准的

第四种
基于Flexbox解决方案-最佳解决方案，只需要考虑flex

main{
  margin: auto;
}
body{
  display: flex;
  min-height: 100vh;
}

第五种
在有宽高的父级下居中

html{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
 
  width: 100%;
  height: 100%;
}
main{
  ...
}