flex方式
/* 方式一 */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 方式二 */
/* 父元素 */
.parent {
display: flex;
}
/* 子元素 */
.child {
margin: auto;
}
table方式
/* todo: width属性百分比失效 */
.parent {
display: table-cell;
vertical-align: middle
}
position方式
/* 方式一 */
.parent {
position: static;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方式二 */
.parent {
position: static;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
网友评论