方式一 Flex布局
此种方式无需定义 元素宽高。
1
2
3
| <body>
<div>居中div</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
border: 1px solid #dddddd;
padding: 100px;
background-color:green;
}
|
方式二 定位-未知宽高
此种方式无需定义 元素宽高。
1
2
3
| <body>
<div>居中div</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
}
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #dddddd;
padding: 100px;
background-color:green;
}
|
方式三 定位-已知宽高
此种方式需要定义 元素宽高。思路同上，设置 margin-top: -height/2, margin-left: -width/2.
1
2
3
| <body>
<div>居中div</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
}
div {
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
text-align: center;
height: 80px;
margin-top: -40px;
line-height: 80px;
border: 1px solid #dddddd;
background-color:green;
}
|
方式四 换一种定位
与方式 2, 3 一样，只是换一种定位方式 fixed。
1
2
3
| <body>
<div>居中div</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 100px;
border: 1px solid #dddddd;
background-color:green;
}
|
方式五 利用 margin
此种方式需要定义 元素宽高. absolute 定位上下左右为0, 设置 margin:auto.
1
2
3
| <body>
<div>居中div</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| * {
margin: 0;
}
div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: green;
}
|