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;
}