水平垂直居中

最新推荐文章于 2022-03-22 16:47:29 发布

qq_36320160

最新推荐文章于 2022-03-22 16:47:29 发布

阅读量104

点赞数

分类专栏：前端文章标签： div在div里面水平垂直居中 img在div里面水平垂直居中

原文链接：https://www.mk2048.com/blog/blog.php?id=hhik12c0ibjb&title=%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD

版权

前端专栏收录该内容

520 篇文章 2 订阅

订阅专栏

                        
 1.img在div里面水平垂直居中<div><img/></div> 
 
 a.img设置成block，计算margin的值 
 
 b.div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center} 
 
      img{vertical-align:middle} 
 
 c.background:url() no-repeat center center; 
 
 2.div在div里面水平垂直居中<div id="parent"><div id="child"></div></div> 
 
 a.#parent{width:num;height:num;display:table;}#child{display:table-cell;vertical-align:middle;text-align:middle} 
 
 b.(需要子元素给固定的宽高) 
 
 #parent{width:300px;height:300px;position:relative}#child{width:100px;height:100px;position:relative;top:50%;left:50%;margin-left:-50px;margin-top:-50px;} 
 
 c.(需要子元素给固定的宽高) 
 
 #parent{width:300px;height:300px;position:relative}#child{width:100px;height:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;} 
 
 d.#parent{width:300px;height:300px;position: relative;}#child{position: absolute;width:auto;height: auto;border:1px red solid;top:50%;left:50%;transform:translate(-50%,-50%);} 
 
 3.上面一个图片下面一个解释<div><img /><p></p></div> 

 a.div{text-align:center;} 
 
 <li><i></i><span></span></li>图标与span元素垂直居中对齐 
 
 i:display:inline-block;vertical-align:super   I标签的高度要跟li的高度一致  
 
 span:display:inline-block;vertical-align:top;overflow:hidden；或者line-height:li的高度 
 
 5.<div><span></span></div>span变成inline-block; 
 
 a.div{display:table-cell;vertical-align:middle;text-align:text;} 
 
 span{display:inline-block;ver-align:middle;width:50px;height:50px;} 
 
 6.margin和width实现水平居中： 
 
     width:固定宽度; margin:0 auto; 

更多专业前端知识，请上 
【猿2048】www.mk2048.com