css 垂直同步的几种方式

Posted 2020-07-26

第一种：

利用 display:table 和 display:table-cell 的方式

这种方式就好像将table布局搬过来一样，相信大家对table的td还是有印象的，它的内容是可以设置垂直居中的.

DEMO:

<style>
     .table{
         display:table;
      }
     .table-cell{
         display:table-cell;
      }
      .othercss{
          background-color:#676;
          width:300px;
          height:300px;
          vertical-align: middle;
          text-align:center;
      }
      .child{
          background-color:#444;
          width:150px;
          height:150px;
       }
</style>

<div class="table">
<div class="table-cell othercss">
    <img src="" class="child" alt="" />
</div>
</div>

第二种方式：利用css3  display:box
弹性盒子模型,css3的特别样式，觉得挺好用的，可以用来做父元素的平分布局或者比例布局，当然还可以用来实现垂直居中，当前演示的就是用来做垂直居中的应用方式。

DEMO:

<style>
.img{
  width:100px;
  height:100px;
  background-color:red;
}
.wrap{
  width:280px;height:280px;
  background-color:#b1b1b1;
  display:box;
  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari、Opera 以及 Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

/*Other*/
  display:box;
  box-pack:center;
  box-align:center;
}
</style>

<div class="wrap">
  <img src="" alt="" class="img" />
</div>

当然还有其他方式，比如利用绝对定位来达到垂直居中的效果,还有其他等等就不一一列举了.