CSS 水平居中和垂直居中

块级元素中的行内元素水平垂直居中

1.块级元素中的行内元素的水平居中
  给包裹该行内元素的块级元素增加居中属性

text-align:center;

2.块级元素中的行内元素的垂直居中
  2.1内容可变的 高度不要写死，使用padding上下填充即可。

  padding:30px 0px;

  2.2内容不变的，一般是单行文字，多用于按钮。使用高度和行高一致即可。

    height:40px;
    line-height:40px;

块级元素在块级元素中的水平垂直绝对居中

1.块级元素(有固定宽度的)在页面上的水平居中。块级元素本身加属性。

  margin:0 auto；

2.块级元素(有固定宽度的)在页面上的全屏。
  2.1 适用场景 整屏全屏，一个整屏接一个整屏的。

  html,body{
      height:100%;
}
  .test1 {
     height:100%;
     background:blue;
}
  .test2 {
  height:100%;
  background:red;
}

2.2 适用场景 弹窗

position:absolute;
top:0;
bottom:0;
left:0;
right:0;

3. 全屏垂直居中
  3.1 宽高是固定死的

  width:200px;
  height:200px;
  position:absolute
  left:50%;
  right:50%;
  margin-left:-100px;(宽度一半)
  margin-top:-100px;（高度一半）

 3.2 宽高不知，由内容撑开

position:absolute
left:50%;
right:50%;
transform:translate（-50%，-50%）;

4 块级元素转化为表格

display:table-cell;
vertical-align: middle;

未完待续......