一个Div在BOdy中上下左右居中

最新推荐文章于 2024-10-29 16:17:45 发布

weixin_33788244

最新推荐文章于 2024-10-29 16:17:45 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinlinux/p/3955412.html

本文将详细解释如何通过设置CSS样式，利用绝对定位（position:absolute；top:50%;left:50%）及margin属性（margin-left：宽度的一半；margin-top:高度的一半）实现一个Div元素在body内的上下左右居中布局。通过实例代码展示操作步骤，并附带具体应用案例。

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

在body中让一个DIv居中上下左右

<body>
 <div style=" width:800px; height:500px; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-250px; background:red;"> </div>
</body>


它是用绝对定位来控制

*top:50%
*left:50%

margin-left：宽度的一半

margin-top:高度的一半;

转载于:https://www.cnblogs.com/xinlinux/p/3955412.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33788244

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

div在html的body中居中对齐（水平垂直）

fivestar2009的博客

12-13

2952

div垂直居中与html

<body>中的div居中显示总结

08-29

338

加上以下css属性 text-align: -moz-center !important;//火狐中 text-align:center; 这样ie 和 ff 中都居中了可是当网页第一行加了 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 其他的浏览器没什么影响 ie中显示反而不居中了这时可以给中需

参与评论您还未登录，请先登录后发表或查看评论

让div在body中居中显示

qweasdzxc_1092665276的博客

03-24

4800

转摘自：https://www.cnblogs.com/ferron/p/4251900.html。谢谢大神分享。如何让DIV相对于body水平和垂直居中我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。...

div在body中水平垂直居中

fivestar2009的博客

05-02

1957

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>水平垂直居中与body</title> <linkrel="stylesheet"type=...

div完美自适应动态上下左右居中

09-25

本文将详细介绍如何利用CSS属性实现一个能够完美自适应屏幕大小变化、动态上下左右居中的`<div>`元素。 #### 一、概念理解在开始之前，我们需要了解几个关键概念： - **自适应**：即页面元素能够根据不同的设备...

一个div在浏览器水平居中的实现方法

01-21

一个div在浏览器水平居中的实现方法第一种方法： CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; } 第二种方法（兼容IE）： CSS Code复制内容到剪贴板 body { text-align: ...

利用margin属性将一个div水平居中

09-25

在Web前端开发中，水平居中一个HTML元素是一项常见的布局需求。CSS提供了多种方法来实现元素的水平居中，而使用margin属性是一种非常流行且简单的方法。在给定的文件内容中，通过编写HTML和CSS代码演示了如何利用...

让div在body中居中对齐

zhouyong0的专栏

04-22

3119

.center{margin:0 auto; width:960px;}

div垂直居中的N种方法

11-02

div垂直居中的N种方法，div垂直居中的N种方法

div标签在body里水平垂直居中

孙悟空空的专栏

01-02

5022

水平居中： div标签在整个body里居中的方法用CSS控制即可，body{text-align:center;} .box{margin: 0 auto;} 类box就是在整个body里水平居中垂直居中：div在body里的垂直居中用CSS控制都不是很有效果，所以用js来控制比较管用,代码如下（jQuery）: function SetPostion(){ var whe

让一个div盒子在body中水平垂直居中

futureexpectaion的博客

03-31

193

【代码】让一个div盒子在body中水平垂直居中。

如何让DIV在body中居中

tnjun123456的专栏

01-12

1万+

设置 body {text-align: center;} #center { margin-right: auto; margain-left: auto; }

让div居中的方式的几种方法

热门推荐

恒二哥的博客

11-04

7万+

可能讲述得不清楚，能看懂就好了。

[前端]关于让DIV居中的几种常用方法

u014775844的专栏

05-12

1071

CSS中方法一：给body标签添加marge

html如何使body的内容居中显示,css里面怎么让body内容居中

weixin_42511270的博客

06-09

1万+

css里面让body内容居中的方法：1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；3、通过jQuery实现水平和垂直居中。本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中...

html body div居中,div内部div居中实现方式总结.html

weixin_33341108的博客

06-17

406

.parent1 {width: 200px;height: 200px;border: 2px solid #000;position: relative;}.child1 {width: 100px;height: 100px;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: ...

DIV内部的内容上下左右完全居中

小熊猫

10-29

1899

内的内容水平垂直居中。根据个人喜好和项目需求选择合适的方法。注意，千万不要设置display属性，会影响居中。内容居中，可以使用CSS的。

div 在body 居中