css3实现水平垂直居中------(特别注意，里边的固定还是不固定)

a,----定位方式（父元素宽高固定，子元素宽高固定）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class="Father">         <div class="children"></div>     </div>   <style lang="scss" scoped>    .Father{      position: relative;    }    .children{      width: 50px;      height: 50px;      position: absolute;      top: 0px;      bottom: 0px;      left: 0px;      right: 0px;      margin: auto;    } </style>

b, ----flex布局方式（父元素宽高不固定，子元素宽高不固定）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="Father">         <div class="children"></div>     </div>   <style lang="scss" scoped>   .Father {     border: 1px solid red;     height: 100px;     display: flex;     justify-content: center;     align-items: center;   }   .children {     width: 50px;     height: 50px;     border: 1px solid blue;   } </style>

c, ----transform方式（父元素宽高不固定，子元素宽高不固定）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="Father">         <div class="children"></div>     </div>   <style lang="scss" scoped>   .Father {     border: 1px solid red;     height: 100px;     position: relative;   }   .children {     width: 50px;     height: 50px;     border: 1px solid blue;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */   } </style>

.