方法1：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.parent { width:800px; height:500px; border:2px solid #000; position:relative;} .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red;} |
方法2：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.parent { width:800px; height:500px; border:2px solid #000; display:table-cell; vertical-align:middle; text-align: center; } .child { width:200px; height:200px; display:inline-block; background-color: red; } |
方法3：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.parent { width:800px; height:500px; border:2px solid #000; display:flex; justify-content:center; align-items:center; } .child { width:200px; height:200px; background-color: red; } |
方法4：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:300px; height:200px; margin:auto; position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/ left:50%; top:50%; margin-left: -150px; margin-top:-100px; background-color: red; } |