CSS让未知高度div的内容垂直居中（table-cell 和 负margin）

方案一：

<div id="outer">
     <div id="middle">
        <img id="inner" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1506010802,1895324471&fm=58&bpow=671&bpoh=409"/>
     </div>
</div>

#outer{
            width:500px;
            height:200px;
            margin: 50px auto;
            border:1px solid #CCC;
            display:table;
            text-align:center;
            position:relative;
}
#middle{
            display:table-cell;
            vertical-align:middle;
            position:absolute;
            top:50%;
            left:50%;
}
#inner{
            position:relative;
            top:-50%;
            left:-50%;
}

原理：标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，IE67不支持table布局

方案二：

<div id="outer2">
    <img id="inner2" src="
https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1506010802,1895324471&fm=58&bpow=671&bpoh=409
"/></div>

#outer2{
     width:500px;
     height:200px;
     margin: 50px auto;
     border:1px solid #CCC;
     position:relative;
}
#inner2{
      position:relative;
      left:50%;
      top:50%;
      margin-left:-61px;
      margin-top:-46px;
}

原理：负margin实现，但缺点是要知道居中内容的宽度和高度。

比如， 假设inner2 的 width:100px; height:50px

那么，其 margin-left: - (100/2) px;      margin-top: -(50/2) px;

    

来源：CSDN

作者：arsaycode

链接：https://blog.csdn.net/arsaycode/article/details/78434034