方法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
;
}
|