如何让div在整个屏幕中垂直居中

最新推荐文章于 2025-07-02 15:54:47 发布
原创 最新推荐文章于 2025-07-02 15:54:47 发布 · 5.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用CSS实现登录页面垂直居中的方法。通过设置.container元素的宽度、高度、位置属性及负边距，使得该元素在网页中垂直居中显示。

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

如图，若将中间登录页保持在垂直居中位置



css代码操作如下：

.container{
	width:100%;
	height:548px;
	top:50%;	
	position:absolute;
	margin:-274px 0px 0px 0px;
}

其中：top 表示距离顶端的距离， margin：-274px 是中间图片高度的一半。

这样设置就可以保证整个<div> 垂直居中。


让DIV水平垂直居中的两种完美方法推荐
09-24
在网页布局中，将一个DIV元素在其父容器中水平垂直居中是一个常见需求。本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来...
div垂直居中屏幕
01-09
div垂直居中屏幕的方法，兼容IE6 7 8 Firefox
html垂直居中屏幕,div实现在屏幕水平垂直居中的方法
weixin_34013327的博客
06-23 268
实现div在屏幕水平垂直居中的4个方法：CSS：*{margin: 0;padding: 0;}.div1 {position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-100px;margin-top:-100px;background: yellow;}.div2 {width: 200px;height: ...
html垂直居中 相对,Div相对页面垂直居中
weixin_30029951的博客
06-26 426
#left{ width:100px;height:50px; position:absolute; left:0px; background-color:#FF0000}#right{width:100px;height:50px; position:absolute; right:0px; background-color:#FF0000}...1.用JS获取当前浏览器视口的高度，计算后居中2...
CSS 垂直水平居中布局全攻略：从基础到进阶的 10 种实现方式
最新发布
苦逼前端分享苦逼经验
07-02 1434
CSS垂直水平居中布局方案大全 本文系统梳理了10种常见的CSS垂直水平居中实现方法，涵盖从传统定位到现代布局技术。主要内容包括： 经典定位方法：绝对定位+margin:auto（兼容IE8+）、绝对定位+Transform（现代浏览器） 现代布局方案：Flexbox单行/多行居中（推荐首选）、Grid二维居中（语法极简） 特殊场景方案：表格布局（兼容旧版）、line-height（单行文本）、CSS变量动态适配 实战案例：登录框居中布局的最佳实践 选择指南：根据兼容性需求推荐Flexbox/Grid作为首
div 绝对屏幕居中
ruilin521314
01-07 917
div 绝对屏幕居中 必须加 &lt;!DOCTYPE 啊! .div { width:300px; height:400px; margin:-200px 0 0 -150px; // -200 == height/2 // -150 == width/2 position:absolute; top:50%; left:50%;} &lt;div cla...
div在屏幕中如何实现居中效果
qq_45750154的博客
06-28 3113
本篇文章给大家介绍让div在屏幕中水平居中和垂直居中的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 最近写网页经常需要将p在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码： <body> <pclass="main"> <h1>MAIN</h1> &lt.
让div在屏幕中居中（水平居中+垂直居中）的几种方法
weixin_33749131的博客
12-03 1万+
水平居中方法: 1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin：0 auto； 绝对定位和margin-left:-(width/2)实现水平居中： 绝对定位+margin:0 auto + left：0 r...
让Div实现水平或垂直居中的相关方法
09-24
在网页设计中，让Div元素实现水平或垂直居中是一项基本任务，这有助于构建美观且响应式的用户界面。本文将详细介绍几种实现Div居中的方法，包括使用CSS和JavaScript的技巧。 首先，我们可以使用CSS来实现Div的居中...
使用绝对定位+负外边距让DIV层水平垂直居中页面
12-02
在网页设计中，让元素水平垂直居中是一种常见的需求，特别是在响应式布局中。传统的CSS方法，如使用`margin: 0 auto;`可以轻松实现水平居中，但垂直居中却较为复杂。这里我们将详细探讨如何利用绝对定位和负外边距来...
DIV+CSS 全屏垂直居中的一个办法
09-25
在网页设计中，全屏垂直居中是一种常见的布局需求，特别是在构建响应式或者自适应页面时。`DIV+CSS` 是实现这一效果的传统方法，但正如描述中提到的，这种方法存在一些限制，需要预先设定元素的高度和宽度。下面将...
让div居中的方式的几种方法
恒二哥的博客
11-04 7万+
可能讲述得不清楚，能看懂就好了。
div居中方法（共8种）
热门推荐
qq_41425194的博客
04-25 12万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
怎么让div居中？是整个div居中，不是div中的内容居中。
bigfishyuwan的博客
05-04 460
怎么让div居中？是整个div居中，不是div中的内容居中。 [code="java"] [/code] div居中： margin: 0 auto; text居中： text-align:center;
使一个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自适应屏幕分辨率，垂直水平居中
localhost
07-11 7425
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 5304
如何将div垂直水平居中？7个小妙招
css 如何让div自适应屏幕水平垂直居中
05-23
可以使用以下 CSS 属性和值来让 div 自适应屏幕并水平垂直居中： ```css div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这里使用了 `position: absolute` 将 div 从文档流中脱离，然后使用 `top: 50%` 和 `left: 50%` 让 div 的左上角定位在页面的中心位置。接着使用 `transform: translate(-50%, -50%)` 将 div 向左上方移动自身宽高的一半，从而实现水平垂直居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值