当前第2页 返回上一页
这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示。 兼容方面也一样拿IE来做比较,第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。
1 2 3 4 5 6 7 8 9 10 | <body>
<div id= "box" >
<div id= "content" >div被其中的内容撑起宽高</div>
</div>
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%); }
|
方法3:利用table-cell
利用 table 的单元格居中效果展示。与 flex 一样,需要写在父级元素上。
1 2 3 4 5 6 7 8 9 10 11 | <div class = "wrapper" >
<p>horizontal and vertical</p>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
|
以上就是css宽高不固定如何实现居中的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
如何使用css隐藏滚动条?
jquery attr与css区别是什么
css h1不占一行怎么办
css怎么设置div随着窗口大小变换
css怎么删除滚动条
css垂直对齐不起作用的原因及解决方法
什么是css伪类
css设置背景透明度有什么方式
css和c的区别是什么
css怎么设置鼠标经过元素显示图片
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css宽高不固定如何实现居中