css如何居中（html鼠标点击按钮后变色）

　　一、position元素
　　第一种：通过 position   translateY
　　a：水平及垂直同时居中.wrapper {     position: relative;     width: 300px;     height: 300px;     border: solid 2px red;     border-radius: 5px; } .wrapper .content{     position: absolute;     top: 50%;     left: 50%;     transform: translateX(-50%) translateY(-50%);     height: 100px;     width: 100px;     border: solid 2px blue;     border-radius: 5px; }
　　b：水平居中.wrapper {     position: relative;     width: 300px;     height: 300px;     border: solid 2px red;     border-radius: 5px; }  .wrapper .content{     position: absolute;     left: 50%;     transform: translateX(-50%);     height: 100px;     width: 100px;     border: solid 2px blue;     border-radius: 5px; }
　　c：垂直居中.wrapper {     position: relative;     width: 300px;     height: 300px;     border: solid 2px red;     border-radius: 5px; }  .wrapper .content{     position: absolute;     top: 50%;     transform: translateY(-50%);     height: 100px;     width: 100px;     border: solid 2px blue;     border-radius: 5px; }
　　第二种：通过 position   margin
　　a：水平及垂直同时居中.wrapper {     position: relative;     width: 300px;     height: 300px;     border: solid 2px red;     border-radius: 5px; }  .wrapper .content{     position: absolute;     top: 50%;     margin-top: -50px;     left: 50%;     margin-left: -50px;     height: 100px;     width: 100px;     border: solid 2px blue;     border-radius: 5px; }
　　b：水平居中 1 .wrapper {  2     position: relative;  3     width: 300px;  4     height: 300px;  5     border: solid 2px red;  6     border-radius: 5px;  7 }  8   9 .wrapper .content{ 10     position: absolute; 11     left: 50%;12     margin-left: -50px; 13     height: 100px; 14     width: 100px; 15     border: solid 2px blue; 16     border-radius: 5px; 17 }
　　c：垂直居中.wrapper {     position: relative;     width: 300px;     height: 300px;     border: solid 2px red;     border-radius: 5px; }  .wrapper .content{     position: absolute;     top: 50%;     margin-top: -50px;     height: 100px;     width: 100px;     border: solid 2px blue;     border-radius: 5px; }二、元素内部信息
　　第一种：元素内容没有标签，只有内容，这样垂直设置height和line-height一样就可以了，水平设置text-align:center就可以.wrapper{      height: 50px;      line-height: 50px;      text-align: center;       }
　　第二种：元素内部元素居中，设置如下：.wrapper-table{     display: table-cell;     height: 100px;     width: 100px;     vertical-align: middle;     text-align: center;     border: solid 2px yellow; }  .wrapper-table .wrapper-table-cell{     border: solid 2px #009900; }