CSS之水平垂直居中

最新推荐文章于 2024-05-05 20:33:54 发布

不再闪亮的星星

最新推荐文章于 2024-05-05 20:33:54 发布

阅读量262

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/q821901733/article/details/78007428

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

三种方法实现DIV水平垂直居中

绝对定位 + margin 负值

/* html */
<div id="box"></div>

/* css */
#box{
    height:200px;
    width:400px;
    background:#ccc;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px; 
    margin-left:-200px;
}

要点：已知元素高和宽，将其绝对定位时，top，left定位50%，最后将margin-top 和 margin-left 设为高和宽的一半的负值。

绝对定位 + translate

#box{
    height:200px;
    width:400px;
    background:#ccc;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

要点：可以不知道元素高和宽，将其绝对定位时，top，left定位50%，最后translate(-50%,-50%)，即移动相对于自身高和宽的-50%。

绝对定位 + margin 自适应

#box{
    height:200px;
    width:400px;
    background:#ccc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

要点：可以不知道元素高和宽，将其绝对定位时，top，left，bottom，right设为0，同时margin 自适应。

效果图都一样，就放一张：
这里写图片描述

CSS图片水平垂直居中

/* html */
<div id="box">
    <img src="./img/test.jpg" alt="">
</div>

/* css */
#box{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #41b886;
    text-align: center;
    line-height: 200px;
}
#box img{
    //图片设为70%,是为了方便查看效果
    width: 70%;
    vertical-align: middle;
}