css样式标签或者文本居中方式，高度100%居中，水平垂直居中

1.margin居中

margin: 0 auto; 上下0，左右自适应

文本居中方式： text-align: center;

有height高度的居中方式：line-height: 100px;

2.flex弹性盒居中

.text {
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;    
}

3.定位居中方法

.Parent {
  position: relative;
}

.text{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2.calc：需要子元素定义宽高。

.Parent {
  position: relative;
}

.text{
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  
/* 需要text元素的宽高 */
}

4.伪类居中方法

给该元素添加伪类（::before或者::after）

.text::after {
    content: '';
    height: 100%;
    display: inline-block; 
    vertical-align: middle;
}

5.display设置居中

给父元素设置display:table，然后给需要文字垂直居中的元素设置display: table-cell;vertical-align: middle.

#item {
    display: table;
}

.text {
    display: table-cell;
    vertical-align: middle;
}