实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中?

　　实现垂直居中的几种方式：

　　1.单行文本垂直居中：当此标签高度和行高的值相等时;

　　2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半;}

　　3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}

　　4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}

　　5.弹性盒：父元素{display:flex;align-items:center;}

　　 不知道宽高的情况下如何实现元素水平垂直居中:

　　1.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

　　2.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

　　3.弹性盒： 父元素{display:flex;} 子元素{margin:auto;}

　　4.弹性盒： 父元素{display:flex;justify-content:center;align-items:center;}

相关文章

实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中？

说说React中onClick绑定后的工作原理

小程序路由跳转

说说gulp和webpack的区别

跨域如何解决