本想這都5G時代了，不用再考慮IE相容問題的事，大膽使用flex，rem等響應式技術，但還是有大部分還有人使用win7,IE8~·10吧。

xp系統的IE瀏覽器最高版本是IE8，win7/win8系統的IE瀏覽器最高版本是IE11。xp就不考慮了（使用xp的應該是極少數了），win7至少在IE9~11，保證較好的佈局。

父元素有固定寬度情況下

 <style>
    .father{width:400px; height:400px; border:1px solid #000;display:table-cell; text-align:center;vertical-align
 
:middle;}
     son{width:100px; height:100px; background:red;display:inline-block;}
 </style>
     
    <div class="father">
        <div class="son">
           display:table-cell;</br>text-align:center;</br> vertical-align:middle
        </div>
    </div>

父元素100%自適應情況

 1 <style>
 2     html,
 3     body {
 4       height: 100%;
 5       margin: 0;
 6       padding: 0;
 7     }
 8 
 9     #box {
10       display: table;
11       width: 100%;
12       height: 100%;
13     }
14 
15     .father {
16       border: 1px solid #000;
17       display: table-cell;
18       text-align
 
: center;
19       vertical-align: middle;
20     }
21 
22     .son {
23       width: 200px;
24       height: 100px;
25       background: red;
26       display: inline-block;
27     }
28   </style>
29   <div id="box">
30     <div class="father">
31       <div class="son">
32         display:table-cell;</br>text-align:center;</br> vertical-align:middle
33       </div>
34     </div>
35   </div>

若子元素是圖片，通過設定父元素的行高來代替高度，且設定父元素的font-size為0

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>



<div class="parent" style="background-color: lightgray;width:200px;">
    <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</div>

個人比較喜歡 display: table-cell，感覺簡潔。

其他的方式不相容IE9，可以參考：https://www.cnblogs.com/xiaohuochai/p/5441210.html