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

最新推荐文章于 2025-04-21 17:57:47 发布
最新推荐文章于 2025-04-21 17:57:47 发布
阅读量10w+ 收藏 47
点赞数 24
分类专栏： 从零开始学前端 文章标签： 前端 web 零基础 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learning_web/article/details/89602364
版权
本文详细介绍了使用CSS实现div元素在屏幕中水平和垂直居中的多种方法，包括使用inline、inline-block、margin、绝对定位、flex布局等技巧，适合前端开发者学习和应用。

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

【让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布局：

在这里插入图片描述

在这里插入图片描述

五种方法让CSS实现居中显示
html基础教程
02-27 1870
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div id="wrapper"> <div id="cell"> <div class=...
让DIV水平垂直居中的两种完美方法推荐
09-24
在网页布局中，将一个DIV元素在其父容器中水平垂直居中是一个常见需求。本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来...
CSS将元素水平居中、垂直居中、水平垂直居中的方法总结
qq_35727582的博客
12-22 1499
在实际开发中，经常会遇到要将页面上某个盒子元素水平居中、垂直居中或者水平垂直居中的情况，需要居中的元素类型不同，采用的方法也不一样，下面就一起看看实现不同类型的元素居中的方法吧
CSS中实现元素水平居中、垂直居中的6个方法（详解）
热门推荐
xtcbql的博客
09-30 7万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
CSS 中实现 div 居中有以下几种常用方法
最新发布
weixin_59997843的博客
04-21 971
方法适用场景优点缺点固定宽度元素水平居中简单需明确宽度Flexbox现代布局，支持动态尺寸灵活，代码简洁兼容性（IE10+）Grid二维布局，一步到位强大，适合复杂设计兼容性（IE不支持）绝对定位 + 变换未知尺寸元素居中无需固定尺寸需父容器定位​​推荐优先使用 Flexbox 或 Grid​​，它们更符合现代 Web 开发需求，且代码简洁易维护。
(转载）关于使用CSS居中(包括水平/垂直)
jackyrongvip的专栏
02-11 1373
关于使用CSS居中(包括水平/垂直)关于使用CSS居中(包括水平/垂直)  用CSS如何使DIV层水平居中这两天开始对网志进行大刀阔斧的页面更改.今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索
div居中
全栈菜鸟的博客
11-13 3705
div绝对定位水平垂直居中（margin:auto实现绝对定位元素的居中） div{ width: 500px; height: 500px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } div绝对定位水平垂直居中（margin 负间距） div{ width:200px; h
三种div居中显示方式
admini1234的博客
12-11 1228
转载于:https://www.cnblogs.com/prolion/p/7887182.html
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
css3 flex实现div内容水平垂直居中的几种方法
11-21
在本文中，我们将深入探讨如何利用Flexbox实现div内容的水平垂直居中。 首先，我们要了解Flexbox的主要属性： 1. `flex-direction`：这个属性定义了flex容器中flex项（子元素）的排列方向。有四个可能的值： - `...
在DIV中图片垂直/水平居中(最简单方法).rar
07-03
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...
CSS网页布局：div垂直居中的各种方法
12-10
在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性并不适用于所有元素。它主要应用于表格元素，如`<td>`、`<th>`和`<caption>`，而不是`<div...
div居中的三种方式
qq_54096012的博客
03-28 523
div居中的三种方式 **1.**弹性布局(display:flex) 注:给需要居中的元素的父元素设置display:flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
使一个div居中显示的三种方法
weixin_43885123的博客
12-06 4万+
使一个div居中显示的三种方法 1. &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;div居中&lt;/title&gt; &lt;style&gt; /*第一种方法
居中一个 div 元素的 N 种方法
泯泷的博客
10-05 4671
标题：How To Center a Div链接：https://www.joshwcomeau.com/css/center-a-div在很长一段时间里，将元素在其父元素中居中是一件非常棘手的事情。随着 CSS 的发展，我们获得了越来越多的工具来解决这个问题。目前看来，我们的选择多种多样！我决定创建本教程来帮助你了解不同方法之间的权衡选择，并为你提供可以使用的策略方案，以处理各种场景中的居中。老实说，这比我最初想象的😅要有趣得多。
CSS元素垂直居中方法总结
donghu2239的博客
04-24 417
　　坚持，坚持，坚持。。。 　　以上为自我鼓励，哈哈。。。 　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 　　相信没有真正是尝试过的人应该都和我一样，觉得居中很简单啊，不是有个margin: auto嘛，如果你真正尝试过，你就知道，垂直居中真的不想你想象中那么简单。 　　在日常设计网页过程中，我们可以根据text-alig...
使div元素居中显示（通过css控制元素居中）
Napster的专栏
07-05 1万+
参考：https://www.cnblogs.com/rubykakas/articles/7992662.html 1. 实现DIV水平居中 设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 div{ width: 100px; height: 100px; margin: 0 auto; } 缺点：需要设置div的宽度 2. 实现DIV水平、垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对
div 居中的几种方法
楠姐的博客
08-25 1016
第一种：display：flex //html <div className="parent"> <div className="child"></div> </div> //css .parent{ height:100%; border:1px solid green; display: flex; justify-content: center; align-items: center; border: 1px s
实现DIV+CSS图片垂直居中的方法和技巧
关于标签，"DIV+CSS 图片居中 垂直居中"是本话题的关键词，它们指向本话题将详细讲解通过DIV元素结合CSS样式来达成图片在垂直方向上的居中排布。 在开始详细介绍如何通过DIV+CSS实现图片垂直居中前，我们需要理解...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值