总结垂直居中的方法
<div class="layout-wrapper"><div class="box1"><h4>垂直居中方法</h4></div></div>.layout-wrapper{width:300px;height:300px;border: 1px solid red;
}
.box1{height:150px;width:150px;border:1px solid blue;
}
方法1：display：flex
.layout-wrapper{width:300px;height:300px;border: 1px solid red;display:flex;align-items:center;
}
.box1{height:150px;width:150px;border:1px solid blue;display:flex;align-items:center;
}方法2：margin，transform配合
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;margin: 50% auto;transform: translateY(-50%);
// 这句话的意思就是向上平移自身元素的百分之50
}方法3：父标签的相对定位+子标签的绝对定位absolute+其他
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;position: relative;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;position: absolute;left: 50%;top: 50%;/*宽高的各一半*/margin-left: -75px;margin-top: -75px;
}//第二种方法：当宽度和高度未知时使用absolute+margin:auto，
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;position: relative;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;
}//第三种方法absolute+transform
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;position: relative;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}方法4：采用table-cell，dispaly:table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;display: inline-block;
// 如果没有行内块元素设置，div不会水平居中只会垂直居中
// text-align: center应用场景：
// 父盒子设置text-align: center后，盒子里面的文字内容、行内元素、行内块元素、 都可以水平居中对齐；
// 而块级元素一般是不可以水平居中的。// 因此，块级元素想要水平居中，由两种方法：
// 一：块级元素没有设置宽高，且父盒子设置了text-align: center;
// 二：块级元素设置margin:0 auto;即可
}方法五：inline-block+vertical-aligin
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;text-align: center;line-height: 300px;
}
.box1 {height: 150px;width: 150px;line-height: 100px;//如果不设置就会继承父元素的行高border: 1px solid blue;display: inline-block;vertical-align: middle;// vertical-align属性只对行内元素有效，对块内元素无效！
// 如果仅仅设置display为inline-block;，vertical-align也是无效的
// 那是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内！
// 说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！// // 解决办法：
// 1.将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle// 2.设置行高即line-height，但是要注意，需要设置父元素的行高，要与div的高度一致！否则也会有偏差的}方法六：强大的grid
.layout-wrapper {width: 300px;height: 300px;border: 1px solid red;display: grid;
}
.box1 {height: 150px;width: 150px;border: 1px solid blue;align-self: center;justify-self: center;
}//关于grid还没有很了解，这里只做记录
