页面布局-垂直水平居中

1、父元素与子元素的宽高都未知

　　1> 使用flex布局

父元素{
  dispaly:flex;
  justify-content:center;
  align-items:center  
}
子元素{
/* 没有其他要求 */
}

 

　　2> 使用transfrom：translate(-50%,-50%)

/* position为 relative 子元素如果不设置宽，则会以父元素的宽一致 */
子元素{
   position: relative;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
 }

 

 

父元素{
  position：relative;
}
/* position为 absolute父元素需要设置position为relative*/
子元素{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
 }

 

 

　　3> 使用table布局

父元素{
  display: table;
}
/*table-cell 的宽高为父元素table的宽高，适用于文字类的居中或者在tablecell元素中嵌套一个display：inline-block 的元素 */
子元素{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

 

2、未知容器的宽高子元素的宽高已知

　　1>使用margin :-子元素高/2 0 0 -子元素宽/2

父元素{
  position：relative;
}
/* position为 absolute父元素需要设置position为relative*/
子元素{
   width:200px;
   height: 100px;
   position:absolute;
   top:50%;
   left:50%;
   margin: -50px 0 0 -100px
 }

 

 

父元素{
  overflow:hidden
}
/* position为 relative父元素需要设置 overflow:hidden */
子元素{
   width:200px;
   height: 100px;
   position: relative;
   top:50%;
   left:50%;
   margin: -50px 0 0 -100px
 }