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

最新推荐文章于 2023-12-17 17:41:20 发布

原创最新推荐文章于 2023-12-17 17:41:20 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #前端

本文介绍了四种常见的网页元素垂直居中方法：使用vertical-align属性、Flex布局、绝对定位及display:table-cell结合vertical-align:center，每种方法都有其适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（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;