关于垂直剧中那些事--

本想这都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

posted @ 2020-09-08 16:45  zzh82322  阅读(137)  评论(0)    收藏  举报