让一个行内元素(如一张图片)始终在盒子中居中

(1)第一种:用vertical-align
<div class="title">
        <div class="flag"></div>
        <div class="content">
            <img src="img_p1_title.png">
        </div>
    </div> 
    .content{
    display: inline-block;
    vertical-align: middle;
  }
.flag{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }    
  第二种:flex布局(注意浏览器兼容性)
  display: flex;
  justify-content: center;  //弹性盒子对象在主轴上的对齐方式
  align-items: center;      //定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
  第三种:position:absolute;绝对定位方式(子绝父相)
    <div class="logo">
       <img src="imgs/logo-1.png" alt="">
    </div>
    .header .logo{
    position: relative;
}
.header .logo img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
第四种:使用display:table-cell配合vertical-align:center(淘宝也是这样用的)
    vertical-align: middle;
    display: table-cell;
    text-align: center;
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页