CSS控制居中

1.未知宽高垂直水平居中

　　方法1 vertical-align:middle;

 1 <style>
 2 .box{text-align:center; width:500px; height:500px; background:#ccc;}
 3 .left{width:0; height:100%; vertical-align:middle; display:inline-block;}
 4 .test{display:inline-block; background:red;}    
 5 </style>
 6 <body>
 7 <div class="box">
 8     <b class="left"></b>
 9     <div class="test">未知宽高垂直居中</div>
10 </div>
11 </body>

　　注意：辅助的也要是行内块 ！

方法二： transform:translate(-50%,-50%);

1 <style>
2 div{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)；}
3 </style>
4 <body>
5     <div>未知宽高的垂直水平居中</div>
6 </body>

　　注意：  css3（兼容性不好） translate是根据自身宽高平移的

方法三：  flexbox(伸缩盒)

1 <style>
2 div{display:flex; justify-content:center; align-items:center; hieght:1000px;}
3 </style>
4 <body>
5     <div>
6         <img src="123.jpg" alter="" />
7     </div>
8 </boxy>

　　注意：父级一定要给高 justify-content 水平方向 align-items 垂直方向

 

posted @ 2016-03-30 01:14  淡淡草季  阅读(244)  评论(0)    收藏  举报