您的位置：首页 > Web前端 > CSS

弹层高度宽度不确定，始终上下左右居中(css方法)

2018-01-04 11:22 537 查看

1.translate定位这是css3 transform的属性，可以将宽高度设为百分比 IE browser<IE9不支持在移动端使用较好

html代码：

<div class="translateCenter">我是translate居中定位</div>

css代码：

<style>

*{margin:0;padding:0}

.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}

</style>

2.margin居中定位不需要确定div的宽高度让top,bottom,left,right都为0 再加个margin:auto 神来之笔 IE browser< IE 8不支持

html代码：

<body>
<div class="marginCenter">我是margin居中定位</div>
</body>

css代码：

<style>
　　*{margin:0;padding:0}
　　 .marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 弹层上下居中

相关文章推荐

新的分享

章节导航