本文主要是介绍前段不定宽高的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%);
}
这篇关于前段不定宽高的div垂直居中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!