子绝父相的应用
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器水平垂直居中</title>
<style>
/* 第一种方法 */
div.outside {
/* position: relative;
height: 200px;
width: 200px;
background-color: skyblue; */
}
div.inside { /* 公式：左上偏移50%，再减去自身宽高的一般 */
/* width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px; */
}
/* 第二中方法 */
div.outside {
position: relative;
height: 200px;
width: 200px;
background-color: skyblue;
}
div.inside {
/* 公式：左上偏移50%，再减去自身宽高的一般 */
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
/* translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outside">
<div class="inside">
</div>
</div>
</body>
</html>