前端开发-CSS实现垂直居中的几种方法

方法一、table-cell

<div class="lg-cont">
  <img src="111.png">
</div>
.lg-cont{height:200px;width:100%;display:table-cell;vertical-align:middle;}

方法二、flex布局

<div class="lg-cont">
  <img src="111.png">
</div>
.lg-cont{height:200px;width:100%;display:flex;justify-content:center;align-items:center;}

方法三、绝对定位

<div class="lg-cont">
  <img src="111.png">
</div>
.lg-cont{position:relative;}
.lg-cont img{position:absolute;width:100px;height:100px;top:50%;left:50%;margin-left:-50px;}

方法四、translate

<div class="lg-cont">
  <img src="111.png">
</div>
.lg-cont{position:relative;}
.lg-cont img{position:absolute;width:100px;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,229评论 3 30
  • 前提 图片大小为:399*367,没有凑成整数-_-html代码: 一、脱离文档流且父元素已知宽高 1、margi...
    嘻哈章鱼小丸子阅读 810评论 0 0
  • gerda和lili的坚持自己确实让人感动,大部分人都不敢做第一个不同的人,但更让我动容的是他妻子的深情。在我...
    邓邓dyc阅读 402评论 0 0
  • 自从成为舞蹈老师,没有一天松懈过,无论何时,无论何地,都在练舞,都在思考上课内容,总结上课经验,记录学生的一点一滴...
    心月_4cee阅读 508评论 0 0