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

1
2
3

<div class = "parent">
    <div class= child></div>
</div>

 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
35
36

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

div.parent{
    position:relative;
}
div.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
/*或者*/
div.child{
    width:50px;
    height:10px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-5px;
}
/*或者*/
div.child{
    width:50px;
    height:10px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}