css盒子垂直居中
<h4>CSS盒子垂直居中的几种方法</h4>
<h4>思路：</h4>
<ul>
<li>
<p>已知盒子宽高
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；</p>
</li>
<li>
<p>未知盒子宽高
给父盒子相对定位
给子盒子绝对定位
top、right、bottom、left全为0
margin: auto;</p>
</li>
<li>
<p>Flex布局
.center{
display:flex;
justify-content:center; //内容水平居中
algin-items:center; //垂直居中
}</p>
</li>
<li>transfrom 平移+定位+transfrom
子盒子需绝对定位absolute
top:50%;left:50%;
transfrom:translate(-50%,-50%)
.child_box{
width: 200px;
height: 100px;
background: #9ff;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%,-50%);
}</li>
</ul>