块级元素在父元素中水平垂直居中的方法

本文介绍四种不同的CSS布局方法实现元素的水平垂直居中,包括使用相对定位和绝对定位结合margin属性,利用绝对定位和calc函数精确计算位置,采用Flexbox布局实现自动居中,以及通过transform属性进行元素偏移。

1、可以给父级使用相对定位,子级使用绝对定位并margin:auto;,将top、left、right、bottom为0

2、给父级和子级都加绝对定位,再给子级添加top:calc(50% - 子级元素高度一半)left:calc(50% - 子级元素宽度一半)

3、 给父级相对定位,子级绝对定位:left:50%;top:50%;
margin-left:-子级元素宽度一半;
margin-top:-子级元素高度一半

4、 给父级一个display:flex; align-items:center;
再给子级添加:margin:0 auto;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值