div嵌套居中的三种方法

html

    

        div2
    

1
2
3
4
5

css

.div1 {
    background-color: aqua;
    height: 100px;
    width: 100px;

    /* 方法一、三 */
    /* 子元素为绝对定位，父元素必须为相对定位 */
    /* position: relative; */

    /* 方法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.div2 {
    background-color: yellow;
    height: 50px;
    width: 60px;

    /* 方法一 */
    /* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto; */

    /* 方法三 */
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34