檬味博客 » 问答 » 求教css的大神，相对定位后的div怎么水平居中？

求教css的大神，相对定位后的div怎么水平居中？

你设的宽度width:320要加单位px 也就是width:320px;除了使用margin:0 auto居中外，你用相对或绝对定位的话，想水平方向居中也可以加margin-left:-160px;和left:50%;
求教css的大神，相对定位后的div怎么水平居中？
你设的宽度width:320要加单位px 也就是width:320px;
除了使用margin:0 auto居中外，你用相对或绝对定位的话，想水平方向居中也可以加margin-left:-160px;和left:50%;2013-04-26
可以设置边界老设置居中，参考如下：
<div style="height:500px; width:500px; border:1px solid #ddd; position:relative; text-align:center; margin:0 auto;">
<div style="height:200px; width:300px; background-color:#ddd; margin:-100px 0 0 -150px; position:absolute; top:50%; left:50%;"></div>
</div>2015-07-10
因为你写错了 这段代码是可以居中的 <div id="container" style="position:relative;width:320px;margin:0 auto">2013-04-26
我试着可以居中的，就是你的width:320,少了px。
<div id="container" style="position:relative;width:320px; height:100px;margin:0 auto; border:1px solid #0000FF"></div>2013-04-26

2013-04-26
<div style=" position:absolute; width:500px; height:300px; left:50%; top:50%; margin-left:-250px; margin-top:-150px; background:#ccc; text-align:center; line-height:300px;">
我在屏幕中间
</div>2013-04-26
你为了相对定位居中也就是为了使用相对定位的特性，那么你可以先让一个div绝对定位，然后在里面设置一个一样大相对定位的块，这样你就可以让这个块里的元素有相对定位的属性;
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.demo{
position: absolute;
width:800px;
height:400px;
background-color: blue;
left: 0px;top: 0px;right: 0px;bottom: 0px;
margin: auto;
}
.demo-child{
position: relative;
width: 800px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo-child">
</div>
</div>
</body>
</html>2018-05-29
mengvlog 阅读 10 次 更新于 2025-07-20 16:51:11 我来答关注问题0
7 个回答檬味博客专题活动
  • 翡希信息咨询 详解CSS的相对定位和绝对定位

    CSS中的相对定位和绝对定位详解如下：一、相对定位 定义：相对定位允许元素相对于自身在文档流中的原始位置进行偏移。 特点： 元素移动后，其原始位置依旧占据在文档流中，不会干扰其他元素的位置。 使用 left、right、top、bottom 属性来调整元素的偏移量。 例如，left: 50px; top: 30px; ...

  • 誉祥祥知识 css中的绝对定位和相对定位

    css中的绝对定位和相对定位绝对定位：就像是把一个元素的左上角用“超级胶水”牢牢粘在浏览器窗口的某个确切位置上，这个位置是通过坐标来指定的哦！它不再受父级元素或其他同级元素位置的影响，而是直接以浏览器窗口为参照。不过要注意，一旦用了绝对定位，它原本在文档流中的位置就会被“遗忘”，后面...

  • 翡希信息咨询 css中的绝对定位和相对定位

    CSS中的绝对定位和相对定位的区别如下：绝对定位： 定义：将元素的左上角固定到浏览器窗口或父级元素的某个指定的唯一的坐标点上。 参照物：绝对定位的参照物通常是父级元素。 位置影响：设置绝对定位后，元素原来的位置会被后面的内容占据。相对定位： 定义：相对于元素本身的原始位置进行定位，或者相对...

  • 翡希信息咨询 css中的绝对定位和相对定位

    CSS中的绝对定位和相对定位的区别如下：绝对定位： 定义：将元素的左上角固定到浏览器窗口或父级元素的某个指定的唯一的坐标点上。 参照物：绝对定位的参照物通常是其最近的已定位祖先元素。如果没有这样的祖先元素，则参照浏览器窗口。 位置影响：元素设置绝对定位后，其原来的位置会被后面的内容占据。...

  • 翡希信息咨询 怎么用css将图片相对定位到页面中间

    要将图片相对定位到页面中间，你可以使用以下几种方法之一。以下是基于你提供的HTML和CSS代码的改进方案，以及另一种使用Flexbox的方法：方法一：使用textalign: center;HTML结构：html2. CSS样式：cssp { textalign: center;}这种方法通过将图片所在的元素的内容居中对齐，来实现图片的水平居中。然而...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部