前段不定宽高的div垂直居中

css控制居中的方法：

1：外层是块级元素，内部是行内元素，例如：给一张图片设置居中的方法；

<!----css---->

<span class="re0">#div</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>

text-align:center;
<span class="br0">}</span>

<span class="re0">#div</span> img <span class="br0">{</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>

2:外层是div块级元素，内部也是块级元素控制居中，

#out{

display:flex;

justify-content:center;

align-items:center;

}

#inner{

}

或者

#out{

position:relative;

}

#inner{

margin:auto;

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

}

3.外层是块级元素，内部是文本text，可以使用line-height来控制居中

<!-----css---->

div{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}