css让一个div水平垂直居中方法大全
来源:互联网 发布:java soa是什么 编辑:程序博客网 时间:2024/05/21 05:24
方法一:position加margin
<div class="wrap"> <div class="center"></div></div>
/**css**/.wrap { width: 200px; height: 200px; background: yellow; position: relative;}.wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
兼容性:主流浏览器均支持,IE6不支持
方法二: diaplay:table-cell
<!-- html --><div class="wrap"> <div class="center"></div></div>
/*css*/.wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center;}.center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green;}
兼容性:由于display:table-cell的原因,IE6\7不兼容
方法三:position加 transform
<!-- html --><div class="wrap"> <div class="center"></div></div>
/* css */.wrap { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px;}
兼容性:ie9以下不支持 transform,手机端表现的比较好。
方法四:flex;align-items: center;justify-content: center
<!-- html --><div class="wrap"> <div class="center"></div></div>
/* css */.wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;} .center { background: green; width: 100px; height: 100px;}
移动端首选
方法五:display:flex;margin:auto
<!-- html --><div class="wrap"> <div class="center"></div></div>
/* css */.wrap { background: yellow; width: 200px; height: 200px; display: flex; } .center { background: green; width: 100px; height: 100px; margin: auto;}
移动端首选
方法六:纯position
<!-- html --><div class="wrap"> <div class="center"></div></div>
/* css */.wrap { background: yellow; width: 200px; height: 200px; position: relative;}/**方法一**/.center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px; }/**方法二**/.center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;}
兼容性:适用于所有浏览器
方法七:兼容低版本浏览器,不固定宽高
<!-- html --><div class="table"> <div class="tableCell"> <div class="content">不固定宽高,自适应</div> </div></div>
/*css*/.table { height: 200px;/*高度值不能少*/ width: 200px;/*宽度值不能少*/ display: table; position: relative; float:left; background: yellow;} .tableCell { display: table-cell; vertical-align: middle; text-align: center; *position: absolute; padding: 10px; *top: 50%; *left: 50%;}.content { *position:relative; *top: -50%; *left: -50%; background: green;}
0 0
- css让一个div水平垂直居中方法大全
- 总结:让一个div垂直水平居中
- 如何让一个div垂直水平居中
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- css让一个容器水平垂直居中
- css div水平垂直居中
- css(div水平垂直居中)
- 采用CSS让DIV在网页中水平垂直居中
- css 让div垂直水平居中,兼容ie6+
- css让div在整个网页水平、垂直居中解决方法
- css怎么让div水平垂直居中(转)
- html和css 让div垂直(竖直)和水平居中
- css让div水平垂直居中,用弹性盒子
- div+css垂直居中和水平居中
- 一个好用的让DIV水平垂直居中的方法
- 如何让DIV水平和垂直居中三种方法
- 让DIV水平和垂直居中的几种方法
- 剑指offer 面试题9 斐波那契数列 java版答案
- 实际工作中用到的:同店换房时对新房间房费计算
- Android Studio 隐藏title报错
- 常用正则表达式大全
- 库存管理系统
- css让一个div水平垂直居中方法大全
- CCF_有趣的数
- 三、C#查询Excel数据源方法
- C# xml文件的创建,修改和添加节点 。
- 【NOIP2012】同余方程
- 虚拟机安装windows64
- Git下的冲突解决
- BaseAdapter getView方法
- HIVE和HBASE区别