CSS垂直居中

最新推荐文章于 2024-06-04 18:04:50 发布

梁同学(的前端笔记)

最新推荐文章于 2024-06-04 18:04:50 发布

阅读量80

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_50936276/article/details/127609183

版权

元素垂直居中

1 行内元素垂直居中

.box{
    line-height:(父盒子高度)px
}

2 子元素绝对定位

<style>
        
        .father {
            /*注意“子绝父相”*/
            position: relative;
            margin: 100px auto;
            height: 552px;
            width: 600px;
            background-color: green;
        }
        .son {
            position: absolute;
            /* (父元素宽/高 - 子元素宽/高)/2 */
            left: 150px;
            top: 126px;
            height: 300px;
            width: 300px;
            background-color: red;
        }      
    </style>

<div class="father">
        <div class="son"></div>
    </div>

在这里插入图片描述

3 特殊方法

这种方法的好处就是父元素宽高改变时，子元素会自动调整居中

方法一：

.father {
            position: relative;
            margin: 100px auto;
            height: 552px;
            width: 600px;
            background-color: green;
        }
        .son {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            height: 300px;
            width: 300px;
            background-color: red;
        }

方法二：

.father {
            position: relative;
            margin: 100px auto;
            height: 662px;
            width: 600px;
            background-color: green;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            /*transform:css2D转换属性，translate移动 */
            transform: translate(-50%,-50%);
            height: 300px;
            width: 300px;
            background-color: red;
        }