在一般情况下利用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有更深入的了解,有谁知到的可以私信或在评论中指出,大家相互学习,共同进步哦��!
—–觉得有用的记得关注哦!!