css 垂直同步的几种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 垂直同步的几种方式相关的知识,希望对你有一定的参考价值。

第一种:

利用 display:tabledisplay: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>

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

 

以上是关于css 垂直同步的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

盘点水平垂直的几种方式

CSS元素垂直居中的几种方法

css居中的几种方式

CSS让图片垂直居中的几种技巧

CSS让图片垂直居中的几种技巧

CSS实现垂直居中的几种方法