不定宽高元素的水平垂直居中

这个问题最早是在某个公司笔试的时候出现的，当时还不会啊，除了会text-align: center;外啥也不会，特此做一个总结，也过了好久了，现在就当整理笔记了。

---

实现的效果如下：

html代码：

<div class="">
  <div>我是一段文字</div>
</div>

方法有三：
1、 绝对定位来实现

.one {
   position: relative;     //父类元素设置为relative
   width: 200px;
   height: 200px;
   border: 1px solid black;
 }
 .one>div {
   position: absolute;                //该元素设置为absolute
   top: 50%;                          //距顶部50%
   left: 50%;                         //距左边50%    
   transform: translate(-50%, -50%);  //把该元素的中心点从左上，移至中心
 }

2、flex布局

.two {
  display: flex;             //在父类上设置成flex
  width: 200px;
  height: 200px;
  border: 1px solid black;
  justify-content: center;   //主轴上中心排列
  align-items: center;       //交叉轴上也是中心排列
}

3、table-cell

.three {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: table-cell;           //在父类设置成table-cell，这样就类似一个单元格了
  text-align: center;            //对该单元格进行水平方向上的设置：居中对齐
  vertical-align: middle;        //对该单元格进行垂直方向上的设置：居中对齐
}

---

暂时不知道其他方法了，有的话在进行补充。