1.使用绝对定位:
.div{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
2.flex布局:
.parent{justify-content:center; // 子元素水平居中align-items:center; //子元素垂直居中display:-webkit-flex;}
3.使用 -webkit-box(注:
目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性
)
.innerDisplay{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
}