iTakeo

css各种水平垂直居中

css各种水平垂直居中，网上查了一下，总结以下几种

line-height垂直居中
缺点，仅限于单行文字

  1. .item{  
  2.     text-align: center;  
  3.     height: 100px;   
  4.     line-height: 100px;   
  5. }  
水平垂直居中

padding垂直居中
缺点，内容不确定时，高度不好固定

  1. .item{  
  2.     padding: 40px 0;  
  3. }  
水平
垂直居中

margin垂直居中
需要知道父层和子层高度，然后marginLeft && marginTop = 父层/2 – 子层/2；
缺点，不灵活

  1. .wrap{  
  2.     height: 100px;  
  3.     width: 220px;  
  4. }  
  5. .item{  
  6.     width: 100px;  
  7.     height: 30px;   
  8.     margin-top: 35px;  
  9.     margin-left: 60px;  
  10. }  
水平垂直居中

position垂直居中
需要知道子层高度，根据子层高度来设置margin；
缺点，不灵活

  1. .wrap{  
  2.     position: relative;  
  3.     width:220px;  
  4.     height: 200px;  
  5. }  
  6. .item{  
  7.     position: absolute;  
  8.     width: 100px;  
  9.     height: 50px;  
  10.     left: 50%;  
  11.     top: 50%;  
  12.     margin-left: –50px;  
  13.     margin-top: –25px;  
  14. }  
水平垂直居中

position垂直居中二
内容div固定宽高，不固定宽高都可以，但是父层貌似必须有宽高。
缺点：父层宽高，比较灵活

  1. .wrap{  
  2.     position: relative;  
  3.     width:220px;  
  4.     height: 200px;  
  5. }  
  6. .item{  
  7.     width: 100px;height: 50px;  
  8.     margin:auto;  
  9.     position: absolute;  
  10.     left: 0px;   
  11.     top: 0px;   
  12.     right:0px;   
  13.     bottom: 0px;  
  14. }  
固定高度
不固定高度

css3的calc垂直居中
也是需要知道父层宽高和自身宽高；
缺点，不灵活，兼容性

  1. .wrap{  
  2.     width:220px;  
  3.     height: 150px;  
  4.     overflow: hidden;  
  5. }  
  6. .item{  
  7.     width: 100px;  
  8.     height: 40px;   
  9.     margin:0 auto;  
  10.     margin-top: calc(150px/2 – 40px/2);  
  11. }  
垂直居中

css3的translate垂直居中
这个是最方便，尤其在移动端，简直神器！

  1. .wrap{  
  2.     width:220px;  
  3.     height: 150px;  
  4.     overflow: hidden;  
  5. }  
  6. .item{  
  7.     width: 100px;  
  8.     height: 40px;  
  9.     margin:0 auto;   
  10.     position: relative;   
  11.     top: 50%;  
  12.     transform:translate3d(0px,-50%,0px);  
  13. }  
垂直居中

text-align + vertical-align垂直居中
添加一个占位标签。
没啥大缺点，多加了一个标签

  1. .wrap{  
  2.     height: 150px;  
  3.     width:220px;  
  4. }  
  5. .placeholder{  
  6.     overflow: hidden;  
  7.     width: 0;  
  8.     min-height: inherit;  
  9.     height: inherit;  
  10.     vertical-align: middle;  
  11.     display: inline–block;  
  12. }  
  13.   
  14. .item{  
  15.     width: 100px;  
  16.     height: 50px;   
  17.     vertical-align: middle;  
  18.     display: inline–block;  
  19. }  
垂直居中

text-align + line-height垂直居中
缺点：父元素必须有个行高。

  1. .wrap{  
  2.     line-height: 200px;  
  3. }  
  4. .item{  
  5.     line-height: normal;  
  6.     vertical-align: middle;  
  7.     display: inline–block;  
  8. }  
垂直居中

flex垂直居中。
唯一缺点就是兼容性了

  1. .wrap{  
  2.     display: -webkit-box;  
  3.     display: -moz-box;      
  4.     display: -ms-flexbox;   
  5.     display: -webkit-flex;  
  6.     display: flex;  
  7.     height: 150px;  
  8. }  
  9. .item{  
  10.     margin:auto; //这句话是关键  
  11.     width: 100px;  
  12.     height: 50px;  
  13. }  
垂直居中

flex垂直居中二
唯一缺点就是兼容性

  1. .wrap{  
  2.     display: -webkit-box;  
  3.     display: -moz-box;      
  4.     display: -ms-flexbox;   
  5.     display: -webkit-flex;  
  6.     display: flex;  
  7.     height: 150px;  
  8.     align-items: center ;  
  9.     justify–content: center;  
  10. }  
  11. .item{  
  12.     width: 100px;  
  13.     height: 50px;  
  14.     background: #555;  
  15.     line-height: 50px;  
  16. }  
垂直居中

table垂直居中
利用table表格的属性，来居中元素

  1. .wrap{  
  2.     display: table-cell;  
  3.     vertical-align: middle;   
  4.     text-align: center;  
  5.     height: 150px;  
  6. }  
  7. .item{  
  8.     width: 100px;  
  9.     line-height: 50px;  
  10.     display: inline–block; //转换为内联元素  
  11. }  
垂直居中

使用button标签

  1. .wrap{  
  2.     height: 150px;  
  3.     background: #222;  
  4.     border-radius: 0px;  
  5.     border:none;  
  6.     display:block;  
  7.     margin:20px auto;  
  8.     width: 220px;  
  9. }  
  10. .item{  
  11.     width: 100px;  
  12.     line-height: 50px;   
  13.     display: inline–block;  
  14. }  

2015/09/17 3 /
前端
/
标签:  暂无标签

评论回复

  1. 回复 2015/11/05 匿名

    😮 😮 😮 😮 😮 😮 😮 ………..太棒了

  2. 回复 2016/10/12 匿名

    😮 好多种

  3. 回复 2016/10/19 匿名

    牛人啊

验证码： 2 + 9 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部