让div在屏幕中居中（水平居中+垂直居中）的几种方法

最新推荐文章于 2024-09-02 03:44:41 发布

原创最新推荐文章于 2024-09-02 03:44:41 发布 · 10w+ 阅读

·

24

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

收录于

从零开始学前端

本文详细介绍了使用CSS实现div元素在屏幕中水平和垂直居中的多种方法，包括使用inline、inline-block、margin、绝对定位、flex布局等技巧，适合前端开发者学习和应用。

【让div在屏幕中居中（水平居中+垂直居中）的几种方法】

水平居中方法:

1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center;

在这里插入图片描述

2.确定宽度的块级元素水平居中方法

margin：0 auto；

在这里插入图片描述

绝对定位和margin-left:-(width/2)实现水平居中：

在这里插入图片描述

绝对定位+margin:0 auto + left：0 right:0 bottom:0 top:0

在这里插入图片描述

3.位置宽度的块级元素居中方法：

display:inline-block 设置text-align:center;

在这里插入图片描述

flex布局实现居中

在这里插入图片描述

垂直居中实现方法：

1.固定高度实现垂直居中

height+line-height
在这里插入图片描述

绝对定位+margin-top赋值
在这里插入图片描述

2.高度自适应实现垂直居中：

flex布局：

在这里插入图片描述

在这里插入图片描述

标签

#前端 #web #零基础 #学习

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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