水平居中 垂直居中的方法

  在HTML中 时长要用到文字的垂直居中 水平居中 我把自己知道的方法总结了一下 分为以下几种情况
  1、行内元素
   行内元素 文字对齐方式 不设置宽高 宽高由内容撑开 可以不用考虑 当然 如果 想要好看一点 可以使用padding挤一下
  行内元素 想要实现垂直居中 就使用flex布局

display: flex;
justify-content:center;
align-items: center;

还有第二种方案 使用绝对定位 子绝父相

position: absolute; //注意 这里使用绝对定位之后 这个元素会变成行内块
top: 50%;
left:50%;
transform: translate(-50%,-50%)

  2、行内块 、
  行内块元素 不设置宽高 文字对齐 方式 也是 不考虑 想要好看一点 就拿padding挤
  行内块元素 设置宽高 文字对齐方式

  单行文字 对齐方式

text-align: center
line-height: 盒子的高度 ;

  多行文字对齐方式 直接使用上边的那个flex布局

  行内块不设置宽高 盒子对齐方式

和上边的那个 绝对定位的使用方法一样
一样 也可以使用 flex布局

  行内块设置宽高 盒子对齐方式

1、 绝对定位那个
2、position: absolute; // 建议配合相对定位使用
  top: 50%;
  left: 50%
  margin-left: -盒子自身的一半;
  margin-right: -盒子自身的