标签：items justify 使用 css lex AC flex 并且 html
首先附带HTML代码
<div class="box box1 box2 box3 box4 box5 box7 box8 box9"> <div>垂直居中</div> </div>
接着附带box为公共样式
.box{
width: 200px;
height: 200px;
background: pink;
}
第一种方法box1：display: table-cell;
兼容ie8及以上。适用于文字与图片
css代码如下：
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
第二种方法box2：display: flex;
兼容ie10及以上。适用于文字与图片
css代码如下：
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
第三种方法box3：绝对定位和负边距;
兼容ie6及以上。适用于文字与图片
但是需要注意的是，需要设置准备的宽高，并且使用的负边距为宽高的一半
css代码如下：
.box3{
position:relative;
}
.box3 img{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
标签：items justify 使用 css lex AC flex 并且 html
原文地址：https://www.cnblogs.com/liyouwu/p/9003661.html
