HTML格式为

     
    
      
       Test
      
    
      
     

下面的styles 皆为.child所用。

1. 垂直定位

inline element:

selector{
   inline-height: parent-height;}

block element:

div_with_exact_height{
       position: absolute;    height: 50px;    margin-top: auto;    margin-bottom: auto;    top: 0;    bottom: 0;      }

div_can_stretch{
       position: absolute;    height: auto;    margin-top: 10px;    margin-bottom: 10px;    top: 0;    bottom: 0;}

2. 水平居中

(1) position: static/relative

div_with_exact_width{
       width: 50px;    text-align: center;    margin-left: auto;    margin-right: auto;}

div_can_stretch{
       width: auto;    text-align: center;    margin-left: 20px;    margin-right: 20px;}

(2) position: absolute;

div_with_exact_width{
       position: absolute;    width: 50px;    margin-left: auto;    margin-right: auto;    left: 0;    right: 0;}

div_can_stretch{
       position: absolute;    width: auto;    margin-left: 20px;    margin-right: 20px;    left: 0;    right: 0;}