search

lzcdev / Daily-Front-End-Questions

每日前端面试题、技巧等知识点，记录自己的成长过程
MIT License
1 stars 0 forks source link

怎么让一个div水平垂直居中 #2

Open lzcdev opened 5 years ago

lzcdev commented 5 years ago

1.flex布局

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2.定位

div.parent {
    position: relative;
}
div.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.容器(flex, grid)+margin

div.parent {
    display: flex;
    /* display: grid; */
}
div.child {
    margin: auto;
}