垂直居中

发表于 | 更新于 
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
父元素不能浮动；父元素不能display：flex；不能百分比
//可以parent^:display:table - parent:display:table; - chilren:
*/
#parent{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
#chilren{
  display:inline-block;
}




/*已知元素的高宽*/
#children{
  background-color:#6699FF;
  width:200px;
  height:200px;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  margin-top:-100px ; /*二分之一的height，width*/
  margin-left: -100px;
}
/*未知元素的高宽*/
#children{
  margin:auto;
  position: absolute; /*父元素需要相对定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}