css居中问题小结

水平居中

方案1：

子元素 margin: 0 auto;

效果图如下：

方案2

父元素 text-align: center;
子元素 display: inline-block;

效果如下图

水平且垂直居中

方案1：

绝对定位

.fa{
    position: relative;
    width: 300px;
    height: 300px;
    background: green;
}
.son{
    width: 100px;
    height: 100px;
    background: pink;
    position: absolute;
    left: 0;
    top: 0; 
    bottom: 0;
    right: 0;
    margin: auto;
  }

效果图:

方案2

绝对定位+transform

效果图：

方案3

弹性盒模型：flex

效果图：