响应式css垂直居中
最近在研究关于响应式的⽹页，对应使⽤百分⽐的宽⾼有点混乱，故查询了很多资料，现记录下来当中笔记，便于以后查看！
1.利⽤vertical-align:middle
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4    <meta charset="UTF-8">
5    <title></title>
6    <style>
7        body{margin: 0;}
8        .father{width: 100%;height: 100%;position: fixed;left: 0;top: 0;text-align: center;font-size: 0;/*设置font-size为了消除代码换⾏所造成的空隙*/background:rgba(0,0,0,0.5); }
9        .daughter{vertical-align: middle;}/*实现daughter居中*/
10        .son{vertical-align: middle;display:inline-block;height: 100%;}
11    </style>
12 </head>
13 <body>
14 <div class = "father">
15    <div class="son"></div>
16    <img class = "daughter" src="1.jpg" alt="我要居中">
17 </div>
18 </body>
19 </html>
2.使⽤transform实现
1 <style>
2    body{margin: 0;}
3    .father {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background:rgba(0,0,0,0.5); }
4 </style>
5 <div class="father">
6    <img src="1.jpg">
7 </div>
3.弹性盒模型
1 <style>
2    body{margin: 0;}
3    .father{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;display:flex;justify-content:center;align-items:center;}
4 </style>
5
6
7 <div class="father">
8        <img src="1.jpg">
9 </div>css设置文字垂直居中
4.⽤表格布局
1 <style>
2 *{margin:0px; padding:0px;}
3 table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
4 .daughter {display:inline-block;}
5 </style>
6 <table>
7    <tr>
8        <td>
9            <div class="daughter">
10                <img src="1.jpg">
11            </div>
12        </td>
13    </tr>
14 </table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。