1、需求分析

     子元素在父元素中水平垂直居中

2、技术分析

   基础的css、html

3、详细分析

如图:

3.1 HTML部分

如图所示，大边框内包含一个小边框两部分，设置一个父元素div和一个子元素div。

     
            父元素     
      
             子元素      
      
     
　

3.2 CSS部分

注释:

1.position属性:

  语法：object.style.position=static|relative|absolute|fixed

  定义：position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

  值和属性：

(不设置position属性则默认为静态定位，设置静态定位后位置属性(上下左右设置)无效，所以父元素位置属性应为除static以外的定位；子元素设置绝对定位，相较于第一个父元素位置的定位，如果没父元素则相对于浏览器）

2、水平垂直居中

left：0； right：0 ；margin：auto：水平居中

top：0； bottom：0 ；margin：auto：垂直居中

top: 0；bottom: 0；left: 0;；right: 0；margin: auto：水平垂直居中