在实现html画面的过程中，经常涉及到文本居中、div水平垂直居中相关的问题，为加强记忆，特总结如下：

　　1、文本居中。测试条件是在div中的文本，html定义如下：

     
      #201
     

　　CSS定义如下：

.inter {    /* 宽度和高度需要相等 */    width: 40px;    height: 40px;    /* margin: 0 auto; */    background-color: white;    color: #56A1E9;        /* 文本居中 */    line-height:40px;/* height与line-height两个值要相等 */    text-align: center;}

　　2、单个div居于父div中央，html定义如下：

     
    
      
       #201
      
     

　　CSS定义如下：

.outer {    /* 宽度和高度需要相等 */    width: 50px;    height: 50px;    position: relative;    background-color: #6DB0FF;}.inter {    /* 宽度和高度需要相等 */    width: 40px;    height: 40px;    /* margin: 0 auto; */    background-color: white;    color: #56A1E9;        /* 文本居中 */    line-height:40px;/* height与line-height两个值要相等 */    text-align: center;        /* 相对父元素中间对齐相等 */    position: absolute;    left: 50%;    top: 50%;    margin-left: -20px;    margin-top: -20px;}

　　需要注意的是，父div中先定义position，然后子组件中再定义相对的position

　　3、多个元素在父div中同一行居中显示，html代码如下：

     
    
      按钮1    
      按钮2    
      按钮3    
      按钮4
     

　　CSS定义如下：

.toolbar_footer .toolButton {    position: relative;    margin: 0px 5px;    width: 40px;    height: 40px;    /* float: left; */    display:inline-block; /* 设置按钮同一行居中显示 */    background-size: 100% 100%;    background-repeat: no-repeat;}