父元素和子元素宽高不固定,如何实现子元素水平垂直居中

方法一:利用弹性盒模型(只给父级设置样式)

display: flex;  //把父级变成弹性盒
justify-content: center; //让子元素在水平方向上居中分布
align-items: center;  //让子元素在垂直方向上居中分布

方法二:利用弹性盒模型(给父级和子级设置样式)

父级元素
display: flex;(垂直居中)
子级元素
margin: auto;(水平居中)

方法三:利用定位属性(position)+位移属性(transform)

• relative相对定位,会在标准流当中占位置

• absolute绝对定位,不会在标准流当中占位置

父级元素
position: relative;
子级元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

注意:这里不一定需要子绝父相,必要情景下,除了(static)静态定位外都可以使用,但这样做会产生额外的

问题(脱离文档流)

总结:把脱离文档流的元素放在不脱离文档流(需要占位置)的元素上就要用“子绝父相”

代码演示(此处仅用一种方法):

HTML

<div class="father_box">
        <divclass="son_box">
            水平垂直居中
        </div>
</div>

CSS

* {
        margin: 0;
        padding: 0;
    }
​
    html,
    body {
        width: 100%; //必须设置
        height: 100%; //必须设置
        position: relative;
    }
​
    .father_box {
        width: 500px;
        height: 500px;
        background-color: aqua;
        position:absolute;
        /* position:static; 除静态定位外都可以 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
​
    .son_box {
        width: 300px;
        height: 300px;
        background-color: rgb(14, 216, 51);
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

运行结果

个人拙见,敬请斧正