前端深入探究（一）常用css水平垂直居中的6种方法

1：vertical-align: middle; // 需要同级dom也是行内元素，相对于同级元素居中

2：line-height: 50px; // 一般设置文字居中

3：定位 加 margin实现居中

     父元素设置 position:relative;

     子元素设置 position:absolute; top 和 left 设置 50%; 高度固定，设置 margin-top 和 margin-left 元素宽度和高度的一半。

.main-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  width: 500px;
  height: 500px;
}

 

4：利用定位 加 css transform偏移来实现居中

     父元素设置position:relative;

     子元素 position:absolute; top 和 left 设置 50%; 设置transform: translate(-50%, -50%);

 

3 和 4 的同与不同

     相同点：

         1：都是通过定位来协助实现的

     不同点：

         1：3的margin须依赖子元素的固定宽高来实现

         2：3只能实现固定宽高元素的居中，4可以实现不同宽高的自适应居中

5：flex 实现居中

     父元素设置 display: flex; align-items: center; justify-content:center;

     flex相关知识：

         align-items // 垂直对齐方式

         stretch // 默认

         flex-start // 上对齐

         center // 垂直居中对齐

         flex-end // 下对齐

         baseline // 基线对齐

         justify-content // 水平对齐方式

         flex-start // 左对齐

         center // 水平居中对齐

         flex-end // 右对齐

         space-between // 两端对齐

         space-around // 两端间距对齐

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

6：模拟 table 实现居中

     父元素设置 display: table;

     子元素设置 display: table-cell; vertical-align: middle; text-align: center;

.main-warp {
  display: table;
  width: 100%;
  height: 100%;
}
.main {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

基本上常用的就这6种，平时使用建议用4、6这两种方法来实现dom元素的水平垂直居中。其他方法都有着自己的缺陷，这两种的优势很明显可以实现在不知道dom元素宽高的情况下实现居中。至于最后这种为什么不推荐，table元素限制太大了，设置一些文字类的还可以，但是大的dom去使用，在样式方面就显得力不从心了。

好了，这是第一篇，后续还会接着更新。