前端开发-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%);}