建站常识

CSS 大小不确定图片垂直居中

发布时间 | 2018/4/2  点击 | 

如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。

发现了如下一个方法,做个收藏。

样式部分:

.middle-out{

      width: 600px;

      height: 385px;

      position: relative;

      display: table-cell;

      vertical-align: middle;

      text-align:center;

      border: 1px solid #f00;

}

.middle-in{

      position: static;

      *position:absolute;

      top:50%;

}

.middle-out .middle-in  img{

      position:static;

      *position:relative;

      top:-50%;

      left:-50%;

}

HTML部分:

<div class="middle-out">

  <div class="middle-in">

         <img src="http://www.021jz.com.cn/image/logo.jpg" />

    </div>

</div>

相关信息