CSS实现元素垂直居中的全方位指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53690943/article/details/116893319

本文详细介绍了多种使元素在CSS中垂直居中的方法，包括设置行高、使用vertical-align、相对定位、绝对定位结合transform、创建隐藏节点、使用display:table-cell、伪元素以及运用flex布局。每种方法都附带了相关代码实现。

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

文章目录：

一、元素垂直居中的设置方法

二、相关代码的实现

元素垂直居中的设置方法：

1、设置子元素和父元素的行高一样

2、子元素设置为行内块，再加vertical-alihn:middle;

3、已知父元素高度，子元素相对定位，通过transform:translateY(-50%);

4、不知道父元素的高度，子绝父相，子元素：top:50%;transform:translate(-50%);

5、创建一个隐藏的节点，让隐藏节点的height为剩余高度的一半

6、给父元素display:table，子元素display:table-cell; vertical-align:center;

7、给父元素添加伪元素

8、弹性盒，父元素：display:flex; 子元素：align-self:center;

相关代码的实现：

(1)绝对定位+margin负值

<style>
    .parent{

        width:400px;
        height:400px;
        margin:100px auto auto 600px;
        border:1px solid #ccc;
        position:relative;
    }


    .box{
        width:200px;
        height:200px;
        background-color:pink;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;
        margin-top:-100px;
    
    }


</style>
<body>

    <div  class="parent">

        <div class="box"></div>

    </div>


</body>

（2）使用css3属性transform

.box{
    width:200px;
    height:200px;
    background-color:pink;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    
    }

(3)使用flex布局

.parent{
    width:400px;
    height:400px;
    margin:100px auto auto 600px;
    border:1px solid #ccc;
    display:flex;
    justify-content:center;
    align-items:center;

}


.box{
    width:200px;
    height:200px;
    background-color:pink;

    }

(4)使用table-cell

.parent{
        display:table-cell;
        text-align:center;
        vertical-align:middle;
}



.box{
    width:200px;
    height:200px;
    backgroun-color:middle;
    display:inline-block;
}