元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)

2020-05-01 10:33:04易采站长站整理

}
.content {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
height:50px;
width:70%;
border:1px solid green;
}
</style>
<div class=”div_1″>
<div class=”content”>
Content here
</div>
</div>

3、利用 50% 偏移 和负值偏移,支持所有浏览器


<style>
.outer{
position:relative;
border:1px solid red;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0px none;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1px solid gray;
}
</style>
<div class=”outer”>
<div class=”cellOuter”>
<div class=”cellInner”>hello cell</div>
</div>
</div>

不使用 table 和 不计算尺寸而且兼容 IE6 的垂直居中方法我没发现,有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽,块级元素宽度取最大值,高度取最小值。
IE6下,div内的内容(文本和元素)可以撑开 div 的高宽(定义了高宽的值),IE7以上版本和firefox都不存在这个问题
IE7以上版本支持 min-height max-height ,min-width max-width,因此在IE7 或 firefox 等较新的浏览器是用 min-height min-width 可以达到IE6下自动撑大元素的效果。