首页 > 代码库 > css 垂直水平居中总结
css 垂直水平居中总结
前言：
垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。
主要方式：
- line-height
- 绝对定位
- 表格 display：table-cell
主要需求：
- 固定宽高
- 不固定宽高
主要兼容：
- ie8+ 主流浏览器
- ie6,7
行高
1. 利用行高与高度相同，实现单行文本居中
缺点：只能是单行文本
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;} 7 </style> 8 </head> 9 <body>10 <div class="d1">11 fdsfdsfdsfdfsfds12 </div>13 </body>14 </html>
效果预览
2.利用inline-block改进（推荐）
改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性
优点：自适应内容
兼容：>=ie8 + 主流
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue;10 text-align: center;11 line-height: 500px;12 }13 .div2{14 display: inline-block;15 vertical-align: middle;16 width: 200px;17 height: 200px;18 background-color: red;19 /*通过 line-hight 来垂直居中 此法>= ie8*/20 }21 </style>22 <body>23 <div class="div1">24 <div class="div2">25 26 </div>27 </div>28 </body>29 </html>
效果预览
绝对定位
1.负margin
top，left 50%；margin -50%；
缺点：需固定宽高
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue;10 position: relative;11 }12 .div2{13 position: absolute;14 width: 200px;15 height: 200px;16 background-color: red;17 top: 50%;18 left: 50%;19 margin-left: -100px; /*此处为width的一半，所以应用此法，元素必须固定宽、高*/20 margin-top: -100px;21 22 }23 </style>24 <body>25 <div class="div1">26 <div class="div2">27 fdsfsdffdf28 fdsfdsfsdff29 </div>30 </div>31 </body>32 </html>
效果预览
2.css3 translate
我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性
兼容：>=ie9 + 主流
优点：自适应内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue;10 position: relative;11 }12 .div2{13 position: absolute;14 background-color: red;15 top: 50%;16 left: 50%;17 transform:translate(-50%,-50%); 18 /*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/19 }20 </style>21 <body>22 <div class="div1">23 <div class="div2">24 fdsfsdffdf25 fdsfdsfsdff26 </div>27 </div>28 </body>29 </html>
效果预览
3.绝对定位 + 相对定位（推荐）
思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%
缺点：多添加一个容器标签
优点：自适应内容
兼容：ie6,7
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .middle-demo-4{ 7 background-color: blue; 8 height: 300px; 9 width: 300px;10 position: relative;11 }12 .middle-demo-4 div{13 position: absolute;14 top: 50%;15 left: 50%;16 }17 .middle-demo-4 div div{18 height: 200px;19 background-color: red;20 position: relative;21 top: -50%;22 left: -50%;23 }/*ie6 ie7*/24 </style>25 </head>26 <body>27 <div class="middle-demo-4">28 <div>29 <div>dsfdsfdsfdsfdsfdsfdsf</div>30 </div>31 </div>32 33 </body>34 </html>
效果预览
4.margin：auto
绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充
缺点：固定宽高
兼容：>=ie8
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue;10 position: relative;11 }12 .div2{13 margin: auto;14 position: absolute;15 background-color: red;16 width: 200px;17 height: 200px;18 left: 0;19 right: 0;20 top: 0;21 bottom: 0;22 23 }24 </style>25 <body>26 <div class="div1">27 <div class="div2">28 fdsfsdffdf29 fdsfdsfsdff30 </div>31 </div>32 </body>33 </html>
结果预览
表格
1.table-cell（推荐）
单元格可以设置垂直属性 vertical-align: middle;
优点：自适应内容
兼容：>=ie8 +主流
缺点：子元素为浮动、绝对定位无效（注意）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .div1{ 8 width: 500px;height: 500px; 9 background-color: blue;10 display: table-cell;11 vertical-align: middle;12 text-align: center;13 }14 .div2{15 /*float: left;position: absolute; 子元素为浮动、绝对定位无效16 此法>=ie817 */}18 </style>19 <body>20 <div class="div1">21 <div class="div2">22 fdsfsdffdf23 fdsfdsfsdff24 </div>25 </div>26 </body>27 </html>
结果预览
总结
根据兼容性和自适应内容来考虑 表格/行高法 + 相对定位法
如果固定宽高 负margin法
css 垂直水平居中总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。