如何垂直居中＜img＞图片或者是一个的浮动元素?

最新推荐文章于 2023-09-26 19:04:47 发布

wutong_jun

最新推荐文章于 2023-09-26 19:04:47 发布

阅读量601

点赞数

分类专栏： css 文章标签： css3 html5 html

本文链接：https://blog.csdn.net/wutong_jun/article/details/108159323

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3实现已知和未知父元素尺寸时，浮动元素及img图片的垂直居中方法，包括两种具体场景的解决方案。

摘要由CSDN通过智能技术生成

如何垂直居中一个浮动元素？

情况一：知道父元素的宽和高

/*父元素.box 要添加了绝对定位*/
.box div{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;/*走父元素高度和宽度的一半*/
    margin-top: -25px;
    margin-left: -25px;/*再往回走自己宽高的一半*/
    background-color: red;
}

情况二：不知道父元素宽度和高度

.box div{
    position: absolute;
    width: 50px;
    height: 50px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: palevioletred;
}

如何垂直居中一个img图片?

<style>
   .contain{
        width: 400px;
        height: 300px;
        background-color: gray;
        /*给图片的容器盒子添加以下三个样式即可*/
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
</styl>
<div class="contain">
    <img src="images/01.jpg" alt="">
</div>