不定宽高div水平垂直居中(兼容ie6)
不定宽高div水平垂直居中(兼容ie6)
csxiaoyao
发布于 2019-02-15 16:40:53
发布于 2019-02-15 16:40:53
不定宽高div水平垂直居中(兼容ie6)
不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。
1. 水平居中
margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素，而是否作用于其他内联元素因浏览器不同而不同，此处可能为内联元素，所以避免使用。
text-align:center; 可以让绝大多数的对象居中对齐，并且这个属性也获得了几乎全部浏览器的支持。实际上，这个属性定义的是块级对象内部文字的对齐方式，内部的文字或者图像一般是内联对象。
2. 垂直居中
垂直居中，对于固定高度的容器使用负margin的方法有效，对于高度不固定的情形使用 vertical-align 属性，它定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
3. 案例
css
#container_outer{
display:table;
overflow:hidden;
_position:relative;
width:600px;
height:400px;
}
#container_inner{
vertical-align:middle;
display:table-cell;
text-align:center;
_position:absolute;
_top:50%;
_left:50%;
border:1px solid #000;
}
#content{
display:inline-block;
_position:relative;
_top:-50%;
_left:-50%;
border:1px solid #000;
}html
<div id="container_outer">
<div id="container_inner">
<div id="content">
动态内容...<br/>
动态内容...<br/>
动态内容...
</div>
</div>
</div> 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年05月10日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读