<!-- <div class="contain">
<div class="line"></div>
<div class="center">居中</div>
</div> -->
<div class="contain">
<div class="center">居中块</div>
</div>
/*已知居中的元素*高度*，可以支持图片居中，*/
/* .contain{
height:100px;
width: 200px;
background-color:red;
position:relative;
}
.center{
height: 20px;
text-align:center;
overflow:auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
vertical-align:middle;
}
*/
/*以下均为可变高度*/
/*table,table-cell在IE/FireFox上和IE上面可能有问题*/
/* .contain {
display:table;
height:200px;
width:200px;
background-color:red;
}
.center {
display:table-cell;
vertical-align:middle;
text-align:center;
} */
/*transform*/
/* .contain{
position:relative;
height:200px;
width:200px;
background-color:lightgreen;
}
.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
*/
/*负外边距（外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;）IE兼容性好*/
/* .center {
width: 300px;
height: 200px;
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin-left: -150px; (width + padding)/2
margin-top: -100px; (height + padding)/2
background-color: lightblue;
} */
/*flex*/
/* .contain {
display:flex;
height:200px;
width:200px;
background-color:red;
justify-content: center;
align-items: center;
} */
/*行内块元素 inline-block,边上设置高100%，宽度为0的元素，推荐是父节点before设置：before ????*/
.contain{
margin: 200px 100px;
position:relative;
height:200px;
width:300px;
background-color:lightgreen;
text-align:center;
}
.center{
display:inline-block;
vertical-align:middle
}
/* .line{
display:inline-block;
width: 0%;
height:100%;
vertical-align:middle;
background-color:lightgreen;
}
*/
.contain:after{
content: '';
display:inline-block;
height: 100%;
vertical-align:middle;
background-color:lightgreen;
}