前段不定宽高的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%);

}

阅读更多
文章标签: css3
个人分类: web 前端css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭