前言
水平居中可以简单使用以下两种方式:
margin:0 auto;
text-align:center;
故重点讨论垂直居中
1.(一行文字)设置行高等于父元素高度
line-height: 200px; //设置行高等于父元素高度
2.(多行文字)verticle-align:middle + 伪元素的方法
//vertical生效的前提是元素的display:inline-block。
.parent::after {
content: '';/* 必须设置 */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
vertical-align: middle;
text-align: center;
display: inline-block;
}
3.(多行文字)使用表格
display: table-cell;
vertical-align: middle;
4.(block方块)calc计算
position:relative;
top:calc(50% - 40px);//40值得是内部block高度的一半
5.(block)transoform
position: relative;/* 为了让top起作用 */
top:50%;
transform: translateY(-50%);
6.(block) 绝对定位
方法一
//父元素必须设置relative
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
方法二(建议)需要设置初始长宽
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
7.(block)flex
display:flex;
align-items:center;
justify-content:center;
原文地址:http://www.cnblogs.com/badpear/p/16823128.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性