【前端】用margin解决居中问题

昨天无意中打开bilibili，看到一位老师讲解应用margin来解决排列问题，非常的高效，因此分享给大家！

单个元素在父元素居中场景

.childClassName {
    margin: auto
}

margin:auto设置在子元素中，会自动填充子元素所在容器的剩余空间，让子元素在容器中居中；

margin-left: auto 表示自动吃掉元素左侧的空间，此时子元素居右；

同理margin-left: auto 则是自动吃掉元素右侧的空间，此时子元素居左......

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

如果按照在父元素中使用flex布局可能需要如下设置

.fatherClassName {
    display: flex;
    justify-content: center;
    align-items: center;
}