.box {
border: 2px solid #000;
height: 500px;
position: relative;
}
.div1 {
border: 1px solid red;
background: yellowgreen;
position: absolute; /*定位后转化为块元素，无需考虑是否是块元素*/
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#box{
width: 100px;
height: 100px;
background: #ccc;
position:relative;
}
#div2{
height: 20px;
background: #f00;
position:absolute;
left:50%;
top:50%;
margin-left:-10px; /* 知道自己大小的情况，自身高度的一半 */
margin-top:-10px; /* 知道自己大小的情况，自身高度的一半 */
}
.box {
border: 2px solid #000;
height: 500px;
text-align: center;
line-height: 500px;
}
.div1 {
border: 1px solid red;
background: yellowgreen;
}
#vc { /*父*/
display:table;
background-color:#C2300B;
width:500px;
height:200px;
overflow:hidden;
margin-left:50px;
_position:relative; /*针对ie6的hack*/
}
#vci { /*子*/
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
#content { /*孙*/
color:#fff;
border:1px solid #fff;
_position:relative;
_top:-50%;
}
{
width:350px;
height:100px;
border:1px solid black;
/* W3C */
display:box;
box-pack:center;
box-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
```
