盒子居中几种方法
方法一: 利用定位
父盒子使用相对定位(relative)，子盒子使用绝对定位(absolute)子盒子设置top:50% left:50%，让子盒子相距父盒子上边界,左边界宽高的50% 这里利用top移动的是以子盒子的左上角为基准的目前的效果就是子盒子的左上角在父盒子的中间位置所以我们要在移动子盒子的宽高的一半，利用 margin-top margin-left返回子盒子自身宽高的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
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
|
方法二:利用margin:auto
父盒子使用相对定位(relative)，子盒子使用绝对定位(absolute)之后设置子盒子的 top，left，right，bottom 都为0子盒子就处于绝对浮动的模式下这时候我们直接设置子盒子margin:auto子盒子的上下左右就都会自动计算盒子就居中了(这种方法在实际中很少使用)
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
|
方法三：利用display:flex
flex布局设置主轴从轴居中
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
|
这里适合在不知道子盒子宽高的情况下使用前置流程大致和方法一一样先设置子绝父相之后设置left和top 50% 在处理子盒子高度的时候使用transform来实现设置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
35
36
37
38
39
40
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
|
