北京web前端开发学习哪家学

回顾移动端实现垂直居中的一些事-Web前端之家

实现元素垂直居中的方法很多，相信大家都能说出几种。相对于PC端，移动端的方法会更多点，平时在网上收集了一些，在此贴出来分享给大家，仅供参考。

方法1:table-cell html结构

CSS

.box1{         display: table-cell;         vertical-align: middle;         text-align: center;             }

方法2：display:flex

.box2{         display: flex;         justify-content:center;         align-items:Center; }

方法3：绝对定位和负边距

.box3{     position:relative; } .box3 span{                 position: absolute;                width:100px;                height: 50px;                 top:50%;                 left:50%;                  margin-left:-50px;                  margin-top:-25px;                 text-align: center;        }

方法4：绝对定位和0

.box4 span{       width: 50%;         height: 50%;          background: #000;       overflow: auto;         margin: auto;         position: absolute;         top: 0;       left: 0;      bottom: 0;       right: 0;   }

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

.box6 span{                 position: absolute;                 top:50%;                 left:50%;                 width:100%;                 transform:translate(-50%,-50%);                 text-align: center;         }

这实际上是方法3的变形，移位是通过translate来实现的。

方法6：display:inline-block

.box7{        text-align:center;        font-size:0;}.box7 span{        vertical-align:middle;        display:inline-block;        font-size:16px;}.box7:after{      content:'';       width:0;       height:100%;      display:inline-block;       vertical-align:middle; }

这种方法确实巧妙…通过:after来占位。

方法7：display:flex和margin:auto

.box8{         display: flex;         text-align: center; } .box8 span{         margin: auto; }

方法8：display:-webkit-box

.box9{         display: -webkit-box;         -webkit-box-pack:center;        -webkit-box-align:center;         -webkit-box-orient: vertical;          text-align: center }