主要介绍元素垂直的一些技巧,水平同理
1、vertical-align: middle;
前提:父元素display: table-cell; vertical-align: middle;
2、align-items: center;
前提:父元素display: flex; align-items: center;
3、align-self: center;
前提:父元素display: flex; 子元素align-self: center;
4、transform: translateY(-50%)
前提:子元素存在定位,top: 50%; transform: translateY: (-50%);
5、margin: auto;
前提:子元素相对父元素绝对定位position: absolute; top; 0; bottom: 0; margin: auto;
6、line-height: xxx;
前提:子元素为单行文本, line-height: xxx; (xxx为父容器height大小)