在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决，只需设置父级标签的主轴与交叉轴居中即可，代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.out {width: 500px;height: 300px;background: red;display: flex;justify-content: center;align-items: center;margin: 0 auto;}.out .in {width: 100px;height: 100px;background: white;}</style></head><body><div class="out"><div class="in"></div></div></body></html>
效果图如下：
但在很多时候，在做水平与垂直居中时常常伴随着定位的存在，而定位的存在往往使弹性盒布局的效果清除掉，而在很多情况下，我们的网页又是响应式的，对标签做到绝对居中，单靠定位很难实现，或者实现起来很复杂，而这里有一种很方便的方法，其中用到了定位，也用到了弹性和布局的一些内容，具体实现方式如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body {position: absolute;left: 0;right: 0;bottom: 0;top: 0;display: flex;}.out {width: 20%;height: 20%;background: red;margin: auto;}</style></head><body><div class="out"></div></body></html>
效果图如下：
此例子是以body为父级标签，且子标签为流式布局，实现方式即是对父级标签进行定位，且设置：display:flex;在子级标签的设置就相对来说更加简单只需设置margin: auto;即可，原理我也不是太懂，却能实现此效果（是我无意间试出来的，嘿嘿��），具体原理可能还需要我对css有更深入的了解，有谁知到的可以私信或在评论中指出，大家相互学习，共同进步哦��！
—–觉得有用的记得关注哦！！
