利用css实现水平垂直居中

当子元素定宽定高

absoluted +relative ，flex也可以

方法一：

绝对定位absoluted

父元素：relative 子元素：absoluted +top,bottom,left,right：0；+margin：auto

方法二：

绝对定位absoluted

父元素：relative 子元素：absoluted ；+top,left:50%；+margin-left：-(width/2)；margin-top：-(height/2px)；

方法三：

绝对定位absoluted

父元素：relative 子元素：absoluted ；+top：calc(50%-(width/2))；left:cacl(50%-(height/2px))；

子元素没有定宽定高

flex，line-height

方法四：同样适用子元素定宽定高 flex 父元素：flex；(水平方向居中)justify-content:center;（垂直方向居中）align-items-center;方法五： line-height 父元素： line-height：父元素高度；//实现子元素垂直居中 text-align：center；//实现水平居中 子元素： dispaly:inline-block; vertical-align:middle;//对行内元素设置垂直方向居中方法六： gripgrid(网格布局，兼容性不好) 父元素： dispaly:grip; justify-content：center； align-items：center；方法七： ·table：tr>td>div{行内块级+tex-align:center}方法八： css-table 父元素： display:table-cell; tex-align:center; vertical-align:middle; 子元素: dispale:inline-block;/块级元素默认100%宽方法九： 子元素： absolute + top: 50%;+ left: 50%;+ transform: translate(-50%, -50%);