如何使body居中，绝对定位与相对定位

最新推荐文章于 2021-06-10 16:48:03 发布
最新推荐文章于 2021-06-10 16:48:03 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端开发-css 文章标签： XHTML CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7451/article/details/81819500
版权

<!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-Type" content="text/html; charset=gb2312" />

  <style type="text/css">
/*
给body加了一个边框，可以看出，body已经居中了
*/
body {
 MARGIN: 0 AUTO;
 width: 700px;
 border: solid 1px #000;
}
</style>

 </head>
 <body>

  <!-- 在该div里面设置position:relative;则该div里面设为绝对定位的元素将是相对于该div进行绝对定位了-->
  <div
   style="position: relative; MARGIN: 0 AUTO; width: 200px; height: 400px; background: orange;"
   name="father">


   <div style="LEFT: 0px; POSITION: absolute; TOP: 260px;">
    这部分是相对于name="father"的div进行绝对定位的

   </div>

  </div>

  <div style="LEFT: 0px; POSITION: absolute; TOP: 260px;">
   这部分是相对于当前窗口进行绝对定位的

  </div>

 </body>
</html>
</html>

iteye_7451
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5第三天笔记03——绝对定位
lqh的博客
07-25 168
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
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居中显示，而且是相对页面窗口水平和垂直方向居中...
body中div居中显示
Truong的专栏
01-29 2756
body {                 margin: 0;                 padding: 0;                 font-size: 14px;         }         #tblDiv{             width:60%;             position:absolute;             left
body居中
lishirong_李世荣的专栏
12-02 915
一是加上这个头第二，加上样式body{ margin:0 auto;}
全面掌握主流CSS布局（水平居中+垂直居中+居中布局）
NolanKy 的 技术博客
10-22 1011
一，水平居中布局 1、行内元素水平居中 父级元素设置text-align: center ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中 <div class="parent"> <div class="child">dome</div> </div> <style> .parent{ text-align: center
Html页面body里的元素居中方法
LiuZnHi的专栏
05-25 1万+
在写H5页面时，经常遇到把body里的元素居中的要求，每次都需要现查，现在整理出来。如下： body { max-width:660px; margin: 0 auto; } ps:max-width参数，根据自己的实际需要调整大小。 ...
使用绝对定位+负外边距让DIV层水平垂直居中页面
12-02
在CSS中，定位主要有静态定位、相对定位、绝对定位和固定定位。对于绝对定位（`position: absolute;`），元素会相对于最近的非静态定位祖先元素进行定位，如果找不到这样的祖先，则会相对于body定位。 1. **水平...
使用CSS居中浮动元素的方法
12-13
方法二：父元素与子元素的相对定位和浮动 这种方法不需要预先知道元素的尺寸，适用于动态内容或响应式设计。首先，父元素设置`position: relative`并使用`left: 50%`使其左边缘位于自身中心。然后，子元素同样设置`...
CSS定位“十字架”之水平垂直居中
09-24
首先，我们要明白，CSS中的定位分为静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。绝对定位是相对于最近已定位的祖先元素进行定位，如果没有这样的祖先，则会相对于初始包含...
HTML对于元素水平垂直居中的探讨
12-29
我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。 到现在为止，探讨了很多种方法。 HTML： XML/HTML Code复制内容到剪贴板 <body>     ...
固定宽高且DIV绝对居中实现思路及示例
09-25
在这个示例中，`.parent`类的元素用于设置一个相对定位的容器，而`.content`类的元素就是我们要居中的元素。通过这种方式，无论屏幕大小如何变化，`.content`都会保持在`.parent`的中央。 总结来说，实现固定宽高且...
body居中显示的问题
12-25 578
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;...
HTML·设置body中内容居中
热门推荐
滴_的专栏
09-15 4万+
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> 扫描结果
让div在body中居中对齐
zhouyong0的专栏
04-22 3050
.center{margin:0 auto; width:960px;}
div标签左右排版，对其，body居中
passport_daizi的博客
04-01 3970
div标签左右排版，对其，body居中 -- kalision body{font-size:19px;align:center;} .shang{background-color:green;color:#FFF;width:500px;height:100px;margin:0 auto;} .zhong{background-color:yellow;width:5
html盒子在body居中,使用CSS实现盒子水平垂直居中的方法(8种)
weixin_33122947的博客
06-10 1369
原始代码：center.html：Centercenter.css：body {background-color: #6ed0ff;}.father {background-color: #be33ec;border-radius: 20px;box-shadow: 0 0 15px rgb(0, 0, 0);margin: 100px auto;width: 300px;height: 300p...
css之position相对定位和绝对定位
weixin_33862993的博客
07-15 531
一、position的四个值：static、relative、absolute、fixed。 绝对定位：absolute和fixed统称为绝对定位 相对定位：relative 默认值：static 二、relative定位与absolute定位的区别 实例： HTML代码： css代码： 初始效果： 1、relative：相对于原来位置移动，元素设置...
html定位样式理解：绝对定位和相对定位
weixin_41174502的博客
04-10 551
设置了绝对定位样式的元素会原地上浮，后浮起来的元素浮得最高，默认z-index（层级）为0。 如下示例：父级div里面有3个div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
body内容页面居中_关于html和body的高度问题如何解决讲解
weixin_29195615的博客
12-27 424
在制作页面的时候我们常常会考虑到页面的兼容性问题，在浏览器与浏览器之间查看网页内容时，有时候会有不一样的效果，这个时候我们就需要去调整兼容性了，今天我们来讲一下，html、body的高度问题。首先：html元素和body元素均为块级元素。简述：有时我们会发现未设置height: 100%，html、body元素的高度却为当前窗口的高度，看上去像是设置了height: 100%。看下面两个例子：例1...
html绝对定位居中
最新发布
06-18
HTML中的绝对定位（position: absolute;）用于将元素相对于其最近的非静态定位祖先元素进行定位。要实现绝对定位的居中，通常需要配合CSS的top、right、bottom和left属性来设置元素的位置。以下是一个简单的例子，展示如何使一个块级元素（如`<div>`）在父容器中水平和垂直居中： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { position: relative; /* 父容器需要是相对定位 */ width: 200px; /* 或者设置一个固定宽度 */ height: 200px; } .centered-element { position: absolute; /* 子元素绝对定位 */ top: 50%; /* 上边界对齐到父容器的50% */ left: 50%; /* 左边界对齐到父容器的50% */ transform: translate(-50%, -50%); /* 使用负的自身尺寸偏移进行居中 */ width: 100%; /* 块级元素宽度 */ height: 100%; /* 块级元素高度 */ } </style> </head> <body> <div class="container"> <div class="centered-element"> <!-- 这里放你的内容 --> </div> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值