垂直左右居中的几种方法
方法一：绝对定位（子元素可以未知高度和宽度）
html
<div class="div1">
<div class="div2"></div>
</div>
css
.div1{
width: 200px;
height: 200px;
position: relative;
background-color: black;
}
.div2{
margin: auto; /*这个margin很关键，没有就不能居中了*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: red;
width: 100px;
height: 100px;
}
方法二：做单元格处理（父元素需要输入固定高度）
html
<div class="div1">
<div class="div2"></div>
</div>
css
.div1{
width: 200px;
height: 200px; /*需要写固定高度*/
background-color: black;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.div2{
background: red;
width: 100px;
height: 100px;
display:inline-block;
}
方法三：flex布局（子元素也可以未知高度和宽度）
html
<div class="div1">
<div class="div2"></div>
</div>
css
.div1{
width:200px;
height:200px;
background-color: black;
display:flex;
justify-content:center;
align-items:center;
}
.div2{
width:100px;
height:100px;
background-color: red;
}
还有方法就是子元素绝对定位，top 和 left 都是 50%，再用margin偏移（需要知道子元素宽高），相信大家都知道
文字加图片水平居中
把文字和图片设置
display: inline-block;vertical-align: middle;
然后给父元素设置font-size: 0;text-align: center;
额外小插曲
其实最开始我需要div在模态框里面 垂直 左右居中，居中到是实现了，但是如果内容高度超过了屏幕，即使设置了 overflow: auto;也有一部分内容看不到。至今也没有找到一个只用css就能解决的两全其美的方法（加上js还是很容易实现）
