css设置标签的水平与垂直居中，定位与弹性盒布局的的结合
在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决，只需设置父级标签的主轴与交叉轴居中即可，代码如下：
<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>
效果图如下：
但在很多时候，在做水平与垂直居中时常常伴随着定位的存在，而定位的存在往往使弹性盒布局的效果清除掉，而在很多情况下，我们的网页又是响应式的，对标签做到绝对居中，单靠定位很难实现，或者实现起来很复杂，而这里有一种很方便的方法，其中用到了定位，也用到了弹性和布局的一些内容，具体实现方式如下：
<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有更深入的了解，有谁知到的可以私信或在评论中指出，大家相互学习，共同进步哦��！
—–觉得有用的记得关注哦！！