css实现垂直居中的几种方法

方法1、这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align 属性。

#wrapper {   //代表父元素
    display: table;
}

#cell {   //代表子元素,里面可放内容
    display: table-cell;
    vertical-align: middle;
}

方法2、使用绝对定位的 div,transform: translate(-50%, -50%)

.wrapper1{   //父元素  相对定位
position: relative;
height: 240px;
width:100px;
}
.content {  //子元素 绝对定位
position: absolute;
top:50%;
left:50%;
margin: auto;
-webkit-transform: translate(-50%,-50%);
}

posted @ 2018-02-27 18:49  星空0909  阅读(130)  评论(0编辑  收藏  举报